CODEWITHSUNDEEP
jqueryjquery-animate
Tan Kucukhas
Tan Kucukhas

Reputation: 827

jQuery Nested Slider Animation

Trying to build a nested slider with jQuery. But i got a problem with the logic for the tabs. Next and previous buttons are easy to create since they have a simple logic to increment or decrement the value. For the anchored slide what would be the best logic to implement the animate based on the tab clicked.

I have stopped coding since I'm not sure how to apply the logic.

jQuery(document).ready(function($) {

  var btnStatus = 1;
  var n = $(".sliderContent").length;
  var mainButtons = $('#main > a').map(function() {
    return this.id;
  }).get();
  var offset = 980;


  function buttonCheck() {
    if (btnStatus === 1) {
      $('.btnPrevious').attr("disabled", true);
    } else {
      $('.btnPrevious').removeAttr("disabled");
    }
    if (btnStatus >= n) {
      $('.btnNext').attr("disabled", true);
    } else {
      $('.btnNext').removeAttr("disabled");
    }
  }

  buttonCheck();


  $(".btnNext").click(function() {
    $("#wrapper").animate({
      opacity: 1,
      right: "+=" + offset,
    }, 500, function() {});
    btnStatus = btnStatus + 1
    buttonCheck();
  });

  $(".btnPrevious").click(function() {
    $("#wrapper").animate({
      opacity: 1,
      right: "-=" + offset,
    }, 500, function() {});
    btnStatus = btnStatus - 1
    buttonCheck();
  });

  window.log = function() {
    if (this.console) {
      console.log(Array.prototype.slice.call(arguments));
    }
  };
  jQuery.fn.log = function(msg) {
    console.log("%s: %o", msg, this);
    return this;
  };

  // $(arr).log(); //show an array of all elements with classname class




  jQuery.each(mainButtons, function(index, value) {

    $('#' + this).click(function() {

      $('#main-slideshow').animate({
        opacity: 1,
        right: "+=" + offset,
      }, 500, function() {});

    });
  });


});
body {
  font-weight: normal;
  font-size: 15px;
  color: #000000;
}
header {
  height: 50px;
  background-color: #99CCFF;
}
footer {
  height: 50px;
  background-color: #99CCFF;
}
.test {
  font-size: 500px;
}
section {
  float: left;
}
.sliderContainer {
  overflow: hidden;
  width: 980px;
  height: 480px;
  background-color: gray;
}
.sliderContent {
  width: 980px;
  height: 480px;
  position: relative;
  float: left;
}
#wrapper {
  position: relative;
  width: 2940px;
}
#content01 {
  background-color: #E2E2E2;
}
#content02 {
  background-color: rgb(213, 255, 213);
}
#content03 {
  background-color: rgb(247, 247, 168);
}
/*OUTER SLIDESHOW*/

#main-slideshow {
  width: 1960px;
  height: 480px;
  position: relative;
  width: 2940px;
}
button {
  position: absolute;
  top: 210px;
}
.btnPrevious {
  left: 0px;
}
.btnNext {
  left: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="main">
  <a id="tab1" href="#">Tab 1</a> |
  <a id="tab2" href="#">Tab 2</a> |
  <a id="tab3" href="#">Tab 3</a> |
  <a id="tab4" href="#">Tab 4</a>
</nav>

<div id="main-slideshow">
  <section>
    <div class="sliderContainer">


      <div id="wrapper">
        <div id="content01" class="sliderContent">
          <h1>Section 01 - Content 01</h1>
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>
        <div id="content02" class="sliderContent">
          <h1> Section 01 - Content 02</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

        <div id="content03" class="sliderContent">
          <h1>Section 01 - Content 03</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

      </div>
    </div>
  </section>
  <section>
    <div class="sliderContainer">

      <div id="wrapper">
        <div id="content01" class="sliderContent">
          <h1>Section 02 - Content 01</h1>
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>
        <div id="content02" class="sliderContent">
          <h1>Section 02 - Content 02</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

        <div id="content03" class="sliderContent">
          <h1>Section 02 - Content 03</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

      </div>
    </div>
  </section>
  <button class="btnPrevious" type="button">&lt; &lt;</button>
  <button class="btnNext" type="button">&gt; &gt;</button>
</div>

Upvotes: 0

Views: 28

Answers (1)

adricadar
adricadar

Reputation: 10209

You can very easily implement this functionality reusing the code for next and previous.

  if(currentIndex < btnStatus)  { // go back to the selected index
     for(var i = btnStatus; i > currentIndex; i--) 
     {
           $("#wrapper").animate({
              opacity: 1,
             right: "-=" + offset,
           }, 500, function() {});
           btnStatus = btnStatus - 1
     }

  } else if(currentIndex > btnStatus) { // go forward to the selected index
     for(var i = btnStatus; i < currentIndex; i++)
     {
           $("#wrapper").animate({
              opacity: 1,
             right: "+=" + offset,
           }, 500, function() {});
           btnStatus = btnStatus + 1
     }
  }

See the snnipet for working example.

jQuery(document).ready(function($) {

  var btnStatus = 1;
  var n = $(".sliderContent").length;
  var mainButtons = $('#main > a').map(function() {
    return this.id;
  }).get();
  var offset = 980;


  function buttonCheck() {
    if (btnStatus === 1) {
      $('.btnPrevious').attr("disabled", true);
    } else {
      $('.btnPrevious').removeAttr("disabled");
    }
    if (btnStatus >= n) {
      $('.btnNext').attr("disabled", true);
    } else {
      $('.btnNext').removeAttr("disabled");
    }
  }

  buttonCheck();


  $(".btnNext").click(function() {
    $("#wrapper").animate({
      opacity: 1,
      right: "+=" + offset,
    }, 500, function() {});
    btnStatus = btnStatus + 1
    buttonCheck();
  });

  $(".btnPrevious").click(function() {
    $("#wrapper").animate({
      opacity: 1,
      right: "-=" + offset,
    }, 500, function() {});
    btnStatus = btnStatus - 1
    buttonCheck();
  });

  window.log = function() {
    if (this.console) {
      console.log(Array.prototype.slice.call(arguments));
    }
  };
  jQuery.fn.log = function(msg) {
    console.log("%s: %o", msg, this);
    return this;
  };

  // $(arr).log(); //show an array of all elements with classname class




  jQuery.each(mainButtons, function(index, value) {

    $('#' + this).click(function() {
      var currentIndex = index + 1;
      
      if(currentIndex < btnStatus)  {
         for(var i = btnStatus; i > currentIndex; i--)
         {
               $("#wrapper").animate({
                  opacity: 1,
                 right: "-=" + offset,
               }, 500, function() {});
               btnStatus = btnStatus - 1
         }
        
      } else if(currentIndex > btnStatus) {
         for(var i = btnStatus; i < currentIndex; i++)
         {
               $("#wrapper").animate({
                  opacity: 1,
                 right: "+=" + offset,
               }, 500, function() {});
               btnStatus = btnStatus + 1
         }
        
      }
         
     
    });
  });


});
body {
  font-weight: normal;
  font-size: 15px;
  color: #000000;
}
header {
  height: 50px;
  background-color: #99CCFF;
}
footer {
  height: 50px;
  background-color: #99CCFF;
}
.test {
  font-size: 500px;
}
section {
  float: left;
}
.sliderContainer {
  overflow: hidden;
  width: 980px;
  height: 480px;
  background-color: gray;
}
.sliderContent {
  width: 980px;
  height: 480px;
  position: relative;
  float: left;
}
#wrapper {
  position: relative;
  width: 2940px;
}
#content01 {
  background-color: #E2E2E2;
}
#content02 {
  background-color: rgb(213, 255, 213);
}
#content03 {
  background-color: rgb(247, 247, 168);
}
/*OUTER SLIDESHOW*/

#main-slideshow {
  width: 1960px;
  height: 480px;
  position: relative;
  width: 2940px;
}
button {
  position: absolute;
  top: 210px;
}
.btnPrevious {
  left: 0px;
}
.btnNext {
  left: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="main">
  <a id="tab1" href="#">Tab 1</a> |
  <a id="tab2" href="#">Tab 2</a> |
  <a id="tab3" href="#">Tab 3</a> |
  <a id="tab4" href="#">Tab 4</a>
</nav>

<div id="main-slideshow">
  <section>
    <div class="sliderContainer">


      <div id="wrapper">
        <div id="content01" class="sliderContent">
          <h1>Section 01 - Content 01</h1>
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>
        <div id="content02" class="sliderContent">
          <h1> Section 01 - Content 02</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

        <div id="content03" class="sliderContent">
          <h1>Section 01 - Content 03</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

      </div>
    </div>
  </section>
  <section>
    <div class="sliderContainer">

      <div id="wrapper">
        <div id="content01" class="sliderContent">
          <h1>Section 02 - Content 01</h1>
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>
        <div id="content02" class="sliderContent">
          <h1>Section 02 - Content 02</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

        <div id="content03" class="sliderContent">
          <h1>Section 02 - Content 03</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

      </div>
    </div>
  </section>
  <button class="btnPrevious" type="button">&lt; &lt;</button>
  <button class="btnNext" type="button">&gt; &gt;</button>
</div>

Upvotes: 1

Related Questions