Boggy Boggy - 1 year ago 68
jQuery Question

JQuery basic slider - Previous button issue

Trying to make a very simple jQuery slider, but slide1 will not go to the last image. It seems to loop in a negative directon -1 -2 -3 -4.

$(".btnPrev").click(function() {
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function() {
if (--currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
});


Can someone please help me this issue?

Codepen

Answer Source

Your issue is because you apply margin-left before currentslide--. I have add a function loop with modulo.

Please try:

$(function() {

  //settings for slider
  var width = 400;
  var animationSpeed = 1000;
  var currentSlide = 1;
  var ifClick = 0;


  //cache DOM elements
  var $slider = $('#slider');
  var $slideContainer = $('.slides', $slider);
  var $slides = $('.slide', $slider);


  $(".btnNext").click(function() {
    if(ifClick == 0){
        ifClick = 1;
        $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
            if (currentSlide++ === $slides.length-1) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
          ifClick = 0;
        });
    }
  });

  $(".btnPrev").click(function() {
    if(ifClick == 0){
        ifClick = 1;
        currentSlide--;
        if (currentSlide % $slides.length == 0) {
            currentSlide = $slides.length-1;
            $slideContainer.css('margin-left', -(width*($slides.length-1)));
            $slideContainer.animate({'margin-left': '+='+width}, animationSpeed,function(){ifClick=0})
        }else{
            $slideContainer.animate({'margin-left': '+='+width}, animationSpeed,function(){ifClick=0})
        }
     }
  });

});
body {font-family: helvetica;}

#slider {
        width: 400px;
        height: 200px;
        overflow: hidden;
    }

    #slider .slides {
        display: block;
        width: 2400px;
        height: 200px;
        margin: 0;
        padding: 0;
    }

    #slider .slide {
        float: left;
        list-style-type: none;
        width: 400px;
        height: 200px;
    }

    /* helper css, since we don't have images */
    .slide1 {background: red;}
    .slide2 {background: blue;}
    .slide3 {background: green;}
    .slide4 {background: purple;}
    .slide5 {background: pink;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="header">
    <h1 class="text-muted">jQuery Basic Slider</h1>
  </div>

  <div id="slider">
    <ul class="slides">
      <li class="slide slide1">slide1</li>
      <li class="slide slide2">slide2</li>
      <li class="slide slide3">slide3</li>
      <li class="slide slide4">slide4</li>
      <li class="slide slide5">slide5</li>
      <li class="slide slide1">slide1</li>
    </ul>
  </div>


  <button class="btnPrev">Previous</button>
  <button class="btnNext">Next</button>

</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download