Куда положить setInterval и clearInterval - PullRequest
Новая
       19

Куда положить setInterval и clearInterval

0 голосов
/ 27 мая 2019

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

Я попытался включить setInterval-function, но я не уверен, как я должен применить это, чтобы заставить это работать. Пока мне не удалось это сделать.

введите код здесь 

var interleaveOffset = 0.2;

var swiperOptions = {
  loop: true,
  speed: 500,
  grabCursor: true,
  watchSlidesProgress: true,
  mousewheelControl: true,
  keyboardControl: true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  on: {
    progress: function() {
      var swiper = this;
      for (var i = 0; i < swiper.slides.length; i++) {
        var slideProgress = swiper.slides[i].progress;
        var innerOffset = swiper.width * interleaveOffset;
        var innerTranslate = slideProgress * innerOffset;
        swiper.slides[i].querySelector(".slide-inner").style.transform =
          "translate3d(" + innerTranslate + "px, 0, 0)";
      }      
    },
    touchStart: function() {
      var swiper = this;
      for (var i = 0; i < swiper.slides.length; i++) {
        swiper.slides[i].style.transition = "";
      }
    },
    setTransition: function(speed) {
      var swiper = this;
      for (var i = 0; i < swiper.slides.length; i++) {
        swiper.slides[i].style.transition = speed + "ms";
        swiper.slides[i].querySelector(".slide-inner").style.transition =
          speed + "ms";
      }
    }
  }
};

var swiper = new Swiper(".swiper-container", swiperOptions);

Я ожидаю, что слайдер воспроизводит слайды автоматически, и автозапуск останавливается, когда пользователь нажимает кнопку «Следующая» или «Предыдущая».

Ответы [ 2 ]

1 голос
/ 27 мая 2019

Использование autoplay

autoplay: {
        delay: 2500,
        disableOnInteraction: true,
},

disableOnInteraction отключит автозапуск, когда вы нажмете на стрелки.

0 голосов
/ 27 мая 2019

В верхней части моей головы вы можете использовать что-то вроде этого 


let timer = null

const startSwiping = () => {
 timer = setInterval(() => {
   swiper.slideNext(100); // transition duration (ms) as argument
 }, 500)
}

const stopSwiping = () => clearInterval(timer)

Я не пробовал этого, но документы Swiper не показывают никакой другой опции, кроме swiper.slideNext(speed)

...