如何使滑块连续循环 [英] How can I make my slider loop continuously

问题描述

我使用以下jquery代码来使我的推荐部分有效:

I used this jquery code to make my testimonials section work:

$(document).ready(function () {
  var testimonialItem = $(".testimonial-wrapper .testimonial-item");
  var lengthOfItem = testimonialItem.length;
  var counter = 0;  
  testimonialItem.hide();
  setTimeout(function(){
    startIteration(counter);
  }, 1000);
  function startIteration(counter) {
    testimonialItem.eq(counter).fadeIn('slow', function() {
      if(counter<=lengthOfItem){ 
        setTimeout(function(){ 
        testimonialItem.fadeOut('slow',function(){
        if (counter == lengthOfItem) {
            counter = 0;  
        }
        else{
            counter++;
        }
        setTimeout(function(){ 
            startIteration(counter);
        }, 500);    
        });
        }, 2000);
      }
    });
  }
});

通过我的 pen ，我意识到离开链接几分钟后，当我返回时，滑块消失了. 有没有一种方法可以解决此问题，使滑块始终循环播放?

Seeing through my pen, I realised that minutes later after leaving the link, when I go back, the slider disappears. Is there a way I can fix that so that the slider loops all the time?

如果您能帮助添加导航项目符号，以便每次客户评价更改时，项目符号也能更改颜色，如您在示例图片中看到的那样，

Would also appreciate if you can help adding the naigation bullets so that each time a testimonials changes, a bullet also changes color as you can see in the example image

感谢进阶

这里是我的codepen

推荐答案

老实说，我不能说我已经解决了任何问题.我认为您可能会因为计时器的使用而遇到其他一些问题，但是我的谷歌搜索没有提出任何建议.

Honestly, I can't tell that I've solved anything. I think you may be running into some other issues with long-standing timers, but my googling isn't coming up with anything.

$(document).ready(function () {
  var testimonialItem = $(".testimonial-wrapper .testimonial-item");
  var lengthOfItem = testimonialItem.length;
  testimonialItem.hide();

  setTimeout(startIteration.bind(0), 1000);

  function startIteration(counter) {
    var item = testimonialItem.eq(counter)
    item.fadeIn('slow', function() {
      setTimeout(function() { 
        item.fadeOut('slow', function() {
          startIteration((counter + 1) %  lengthOfItem);  
        });
      }, 2000);
    });
  }
});

这篇关于如何使滑块连续循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！