Как я могу сделать этот слайдер l oop автоматически с определенной задержкой? ie. 1000мс - PullRequest
Новая
       90

Как я могу сделать этот слайдер l oop автоматически с определенной задержкой? ie. 1000мс

1 голос
/ 10 марта 2020

Кто-нибудь может объяснить, как сделать этот слайдер l oop также автоматически?

Вот только javascript для простоты: 

$(document).ready(function(){
  for (var i=1; i <= $('.slider__slide').length; i++){
    $('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
  }
  setTimeout(function(){
    $('.slider__wrap').addClass('slider__wrap--hacked');
  }, 1000);
})

function goToSlide(number){
  $('.slider__slide').removeClass('slider__slide--active');
  $('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}

$('.slider__next, .go-to-next').on('click', function(){
  var currentSlide = Number($('.slider__slide--active').data('slide'));
  var totalSlides = $('.slider__slide').length;
  currentSlide++
  if (currentSlide > totalSlides){
    currentSlide = 1;
  }
  goToSlide(currentSlide);
})

1 Ответ

0 голосов
/ 10 марта 2020

Просто переместите вашу скользящую функцию в ее собственную функцию, используйте setInterval вместо setTimeout для l oop перехода, а затем переместите эту скользящую функцию в этот setInterval. Вот это JS: 

var loopInterval;

$(document).ready(function(){
  for (var i=1; i <= $('.slider__slide').length; i++){
    $('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
  }
  loopInterval = setInterval(function(){
    $('.slider__wrap').addClass('slider__wrap--hacked');
    slidingFunction();
  }, 10 * 1000);
})

function goToSlide(number){
  $('.slider__slide').removeClass('slider__slide--active');
  $('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}

$('.slider__next, .go-to-next').on('click', nextClick)

function slidingFunction() {
  var currentSlide = Number($('.slider__slide--active').data('slide'));
  var totalSlides = $('.slider__slide').length;
  currentSlide++
  if (currentSlide > totalSlides){
    currentSlide = 1;
  }
  goToSlide(currentSlide);
}

function nextClick(){
  clearInterval(loopInterval);
  loopInterval = setInterval(slidingFunction, 10 * 1000);
  slidingFunction();
}

Вот кодовое поле: https://codepen.io/nick-siegmundt/pen/MWwQgVr

...