Слайдер Jquery с автовоспроизведением не останавливается на последнем слайде

Question

Я пытаюсь сделать простой слайдер, который будет оставаться 5 секунд на каждом слайде (4 элемента на слайде), затем вернется к первому слайду и запустится снова.

Количество элементов может варьироваться отОт 1 до 16.

Прямо сейчас мой слайдер не останавливается на последнем слайде.Это возвращается к первому.

Есть идеи?Спасибо

Вот скрипка .

var width = $(window).width();
var currentSlide = 1;
var $slides = $('ul li');
var itemNbr = document.getElementsByTagName("li").length;

$(function() {
    if ( itemNbr > 4) {
        setInterval(function () {
            $('ul').animate({
                'margin-left' : '-='+width}, 700, function () {
                currentSlide++;
                if (currentSlide >= itemNbr/4) {
                    currentSlide = 1;
                    $('ul').animate({
                        'margin-left' : '0px'},700
                    ); 
                };
            });
        },5000);
    };
});

Answer 1

Вы можете изменить свою функцию setInterval следующим образом:

var width = $(window).width();
var currentSlide = 1;
var $slides = $('ul li');
var itemNbr = document.getElementsByTagName("li").length;

$(function() {
    if ( itemNbr > 4) {
        setInterval(function () {
        if (currentSlide >= itemNbr/4) {
            $('ul').animate({'margin-left' : '0px'}, 700); 
            currentSlide = 1; // Edit
        }
        else {
            $('ul').animate({'margin-left' : '-='+width}, 700);
            currentSlide++;
        }
        },5000);
    };
});

wrapper {
  width:100%;
  overflow:hidden;
}
ul {
  width:300vw; height:320px;
  list-style:none;
  padding:0; margin:0;
  overflow:hidden;
}
ul li {
  width:80vw;
  height:60px;
  display:inline-block;
  margin:10px 10vw;
  background-color:red;
  padding:0;
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<wrapper>
  <ul>
    <li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li><!--
    --><li>ITEM</li>
  </ul>
</wrapper>