Остановка autoplay в swiper слайдер при наведении

22 сентября 2021, 01:00

Хочу использовать swiper слайдер. Я уже разобрался как сделать автоматическое перелистывание картинок.

Что нужно дописать в скрипт, чтобы при наведении на слайдер мышкой он останавливался, а, если убрать курсор со слайдера, снова запускалось перелистывание автоматически?

Вот код:

 var swiper = new Swiper('.swiper-container', {
  spaceBetween: 30,
  effect: 'fade',
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,        
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },        
});

Answer 1

Здесь подробное API слайдера. Слушатели mouseenter/mouseleve работают в рамках текущего инициализированного слайдера.
Если у вас в проекте будет 2 и более таких слайдера, всего лишь нужно добавить дополнительный класс-селектор для элемента к которому применяете свойства.

К примеру:

const swiper2 = new Swiper('.swiper-container.swiper-2', {
  // Свойства и методы слайдера
});

const swiper = new Swiper('.swiper-container', { 
  spaceBetween: 30, 
  effect: 'fade', 
  loop: true, 
  autoplay: { 
    delay: 500, 
    disableOnInteraction: false, 
  }, 
  pagination: { 
    el: '.swiper-pagination', 
    clickable: true, 
  }, 
  navigation: { 
    nextEl: '.swiper-button-next', 
    prevEl: '.swiper-button-prev', 
  }, 
  on: { 
    init() { 
      this.el.addEventListener('mouseenter', () => { 
        this.autoplay.stop(); 
      }); 
 
      this.el.addEventListener('mouseleave', () => { 
        this.autoplay.start(); 
      }); 
    } 
  }, 
});

.swiper-container { 
  width: 500px; 
  height: 300px; 
} 
 
.swiper-slide { 
  text-align: center; 
  font-size: 18px; 
  background: #fff; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script> 
 
<div class="swiper-container"> 
  <div class="swiper-wrapper"> 
    <div class="swiper-slide">Slide 1</div> 
    <div class="swiper-slide">Slide 2</div> 
    <div class="swiper-slide">Slide 3</div> 
  </div> 
  <div class="swiper-pagination"></div> 
  <div class="swiper-button-prev"></div> 
  <div class="swiper-button-next"></div> 
</div>

Answer 2

Добавьте события mouseover и mouseout

document.getElementsByClassName("swiper-container")[0].addEventListener("mouseover", function( ) {
    swiper.autoplay.stop();
});
document.getElementsByClassName("swiper-container")[0].addEventListener("mouseout", function( ) {
    swiper.autoplay.start();
});

Или jQuery

$(".swiper-container").mouseenter(function() {
    swiper.autoplay.stop();
});
$(".swiper-container").mouseleave(function() {
    swiper.autoplay.start();
});