Я использовал этот код jquery, чтобы заставить работать мой раздел отзывов:

$(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);
      }
    });
  }
});

Просматривая мое перо, я понял, что через несколько минут после выхода из ссылки, когда я захожу назад, слайдер исчезает. Есть ли способ, которым я могу это исправить, чтобы ползунок постоянно зацикливался?

Был бы также признателен, если бы вы могли помочь в добавлении навигационных маркеров, чтобы каждый раз, когда менялись отзывы, пуля также меняла цвет, как вы можете видеть на изображении примера.

enter image description here

Заранее спасибо

Вот мой кодекс

-1
user agent 24 Апр 2017 в 22:03

2 ответа

Лучший ответ

Честно говоря, я не могу сказать, что я что-то решил. Я думаю, вы можете столкнуться с некоторыми другими проблемами с давними таймерами, но мой поиск в Google ничего не дает.

$(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);
    });
  }
});
1
savinger 24 Апр 2017 в 22:34

Вы можете использовать .queue(), .delay(), .promise(), .then(), повторное планирование для вызова той же функции, когда массив очереди не содержит никаких дополнительных функций для вызова

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

function testimonials() {
  return $({}).queue("testimonials", $.map(items, function(el) {
      return function(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 testimonial-wrapper">
  <div class="testimonial-item">
    <h3>Testimonials</h3>
    <hr>
    <h4>Shaf/ Seo</h4>
    <blockquote>
      <p>Hi</p>
    </blockquote>
  </div>
  <div class="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>
1
guest271314 24 Апр 2017 в 19:19
43595870