How Can I Make My Slider Loop Continuously

I used this jquery code to make my testimonials section work: $(document).ready(function () { var testimonialItem = $('.testimonial-wrapper .testimonial-item'); var lengthOfIte

Solution 1:

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);

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

Solution 2:

You can use .queue(), .delay(), .promise(), .then(), repeated scheduling to call same function when queue array does not contain any further functions to call

var items = $(".testimonial-item").hide();

functiontestimonials() {
  return $({}).queue("testimonials", $.map(items, function(el) {
      returnfunction(next) {
        $(el).fadeIn("slow", function() {
          $(this).delay(2000).fadeOut("slow", next)
        })
      }
    })).dequeue("testimonials").promise("testimonials")
    .then(testimonials)
}

testimonials()

hr {
  height: 4px;
  border: none;
  color: #333;
  background-color: #7BC83A;
  width: 70px;
  margin-left: 0;
}

.testimonial-item {
  display: block;
  opacity: 0.872447;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="col-md-6 testimonial-wrapper"><divclass="testimonial-item"><h3>Testimonials</h3><hr><h4>Shaf/ Seo</h4><blockquote><p>Hi</p></blockquote></div><divclass="testimonial-item"style="opacity: 1;"><h3>Testimonials</h3><hr><h4>Shaje/ As</h4><blockquote><p>Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text</p></blockquote></div></div>