Когда я нажимаю на кнопку последнего прогресса и позволяю завершить процесс выполнения, ползунок не возвращается к началу, но исчезает?

Question

Мне было интересно, если кто-нибудь может помочь, у меня есть кодекс: -

https://codepen.io/robbiemcmullen/pen/eoQxKJ

Все работает нормально, кроме тех случаев, когда вы нажимаете последнюю кнопку, она не переходит в стартовую или первую кнопку и ползунок, как это должно быть.

Мой код выглядит следующим образом, было бы замечательно, если кто-нибудь может помочь: -

//homepage slider
$(document).ready(function(){

  // set variables length / timeline / items
  // var duration = 5,
    var currentindex = Math.round(Math.random()*(3-1)+1),
    totalitems = $('.info').length,
    timeline = new TimelineMax(),
    item,
    bar,
    duration;

  function runslide() {

      item = $('[data-id='+ currentindex +']');
      bar = item.find('.bar');
      duration = parseInt(item.data('duration'));

      item.addClass('active');

      // if window is more than 768px run timer else pause (this is according to spec)
      if ($(window).width() > 769) {

        timeline.play();
        timeline
          .to(bar, 0, {left: '-100%'})
          .to(bar, duration, {left: '0%', ease: Linear.easeNone, delay: .75, onComplete: function(){
            item.addClass('fadeout');
          }})
          .to(bar, duration/10, {left: '100%', ease: Power4.easeIn, delay: .25, onComplete: function(){
            if(currentindex === totalitems){
              currentindex = 1;
            } else {
              currentindex++;
            }
            item.removeClass('active fadeout');
            timeline.clear();
            runslide();
          }});
      }
  }

  // progress bar and click slide bar
  function clickslide(e) {

    currentindex = e;
    timeline.clear();
    TweenMax.to(bar, duration/10, {left: '0%', ease: Power4.easeOut});
    TweenMax.to(bar, duration/10, {left: '100%', ease: Power4.easeIn, delay: duration/10});

    $('.photo, .info').removeClass('active fadeout');
    runslide();

  }

  $('.slider-banner')
    .on('click', '.info:not(.active, .fadeout)', function(){
      clickslide($(this).attr('data-id'));
      timeline.pause();
    })

    .on('mouseover', '.info.active:not(.fadeout)', function(){
      timeline.pause();
    })
    .on('mouseout', '.info.active:not(.fadeout)', function(){
      timeline.play();
    });


  $('.photo').each(function(){
    $(this).css({'background-image': 'url('+ $(this).attr('data-image') +')'});
  });

  // run on window load
  $(window).on('load', function(){
    runslide();
  });

});

Answer 1

$(this).attr('data-id') возвращает строку, и вы устанавливаете currentindex в вашей функции clickslide(e) на это значение.

После этого вы используете оператор строгого равенства в вашей функции runslide() для сравнения текущего индекса, поэтому он переходит к условию else, начиная с 4 !== '4'.

А в условии else currentindex++; преобразует '4' в 4 и увеличивает его, поэтому значение получает 5, а переменная currentindex продолжает увеличиваться при каждом вызове runslide().

Либо вы используете parseInt() для анализа строки, полученной из атрибута данных, либо вы используете == для сравнения значений.