Как автоматически играть в слайдер Owl Carousel 2 с помощью мыши?

Я хочу, чтобы моя сова-карусель начала прокручиваться, когда мышь входит в этот раздел HTML. Я использую приведенный ниже код. Я попытался с приведенным ниже кодом, но это, кажется, не работает должным образом. Это работает только для первого слайдера, а затем каждый раз, когда я заставляю свою мышь уходить и входить, чтобы скользить по элементам. Пожалуйста, обратитесь к моему фрагменту кода ниже:

var owl=$('#service-slider');
owl.owlCarousel( {
    loop:true, autoplayTimeout:100, autoplayHoverPause:false, margin:0, nav:true, items:3, rewind:false, dots:false, navText:['<span><img src="images/slider-arrow.png" alt="slider arrow"></span>', '<span><img src="images/slider-arrow.png" alt="slider arrow"></span>'], responsive: {
        0: {
            items: 1, nav: true, dots: false, autoHeight: true,
        }
        , 600: {
            items: 2, autoHeight: true,
        }
        , 768: {
            items: 2
        }
        , 1025: {
            items: 3
        }
    }
}

);
$('.service-slider').on('mouseenter', function() {
    owl.trigger('play.owl.autoplay', [100]);
}

);
$('.service-slider').on('mouseleave', function() {
    owl.trigger('stop.owl.autoplay');
}

Любая помощь приветствуется...

1 ответ

Я просмотрел ваш код. Я не знаю, почему вы вызываете.service-slider check, класс существует или нет. По умолчанию сова использует карусель.owl-stage, и вы можете использовать этот класс.

$('.owl-stage').on('mouseenter', function() { owl.trigger ("play.owl.autoplay", [100]); }); $ ('. owl-stage'). on ('mouseleave', function () { owl.trigger ('stop.owl.autoplay'); });

Другие вопросы по тегам