Добавление паузы на бесконечный плавный модифицированный слайдер сов - PullRequest
Новая
       17

Добавление паузы на бесконечный плавный модифицированный слайдер сов

0 голосов
/ 28 апреля 2019

Я пытаюсь создать бесконечный плавный слайдер изображений. Я начал с кода https://codepen.io/mdrezwanferdous/pen/wpNZxN,, потому что хочу получить тот же эффект. Но мне трудно разобраться, как добавить эффект парения. Когда мышь находится над одним изображением, слайдер должен немедленно остановиться. И когда мышь уходит, слайдер должен продолжать цикл.

Что я пытался сделать до сих пор: 

$('.owl-carousel .owl-item').on('mouseenter',function(e){
  $('.owl-carousel').trigger('mouseover.owl.autoplay');
  $('.owl-carousel').trigger('stop.owl.autoplay');
  $('.owl-carousel').trigger('stop.autoplay.owl');
  $('.owl-carousel').trigger('autoplay.stop.owl');
})

Но ни одна из этих четырех строк не сработала.

Есть ли простой способ это исправить? Это возможно даже с Совой Карусель?

Если нет, есть ли бесплатный слайдер, который может это сделать? Я попытался с помощью слайдера Slick, но он не работал отлично (проблема была в том, что при наведении слайд не останавливался сразу. Вместо этого он ждал завершения перехода слайдов).

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 28 апреля 2019

Пример, которому вы пытаетесь следовать, кажется слишком сложным. Я бы предложил использовать Slick.js здесь.

Библиотечных документов должно быть более чем достаточно для начала работы: https://kenwheeler.github.io/slick/

Сосредоточьтесь на тех 2 настройках (autoplay, pauseOnHover), которые, я считаю, именно то, что вы ищете (см. Раздел «Автозапуск»): 

$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  pauseOnHover: true
});

Дайте мне знать, если у вас возникнут проблемы с пониманием вашей проблемы

...