Автовоспроизведение совой карусели при прокрутке до не работающего элемента - PullRequest
Новая
       28

Автовоспроизведение совой карусели при прокрутке до не работающего элемента

0 голосов
/ 19 марта 2019

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

Это мой HTML-элемент, для которого я хочу запустить автозапуск: 

<div class="owl-carousel r-latest-news-list" id="r-latest-news-slider">

Все загружено правильно, потому чтоесли я устанавливаю автозапуск для запуска при загрузке страницы, как обычно, это работает.

Это мой код для запуска автозапуска при наведении мыши на этот элемент: 

if($("#r-latest-news-slider").length > 0){
    var owl = $('#r-latest-news-slider').owlCarousel({
        loop:true,
        margin: 30,
        items: 4,
        nav: false,
        dots: true,
        responsive:{
            0:{
                items:2
            },
            600:
                items:2
            },
            1000:{
                items:4
            }
        }
    })
    $('#r-latest-news-slider').on("mouseenter", function(e) {
        console.log('mouse enter');
        owl.trigger('play.owl.autoplay', [2000]);
    })
}

Этодокументация, которой я следую: https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

1 Ответ

0 голосов
/ 21 марта 2019

Привет, на вопрос ответили здесь: https://lazyfox.io/task/qP6/owl-carousel-autoplay-when-scrolling-to-element-not-working

if($("#r-latest-news-slider").length > 0) {
    var owl = $('#r-latest-news-slider').owlCarousel({
        loop: true,
        margin: 30,
        items: 4,
        nav: false,
        dots: true,
        responsive: {
            0: {
                items:2
            },
            600: {
                items:2
            },
            1000: {
                items:4
            }
        }
    });
}

// Function for checking if the element is in view
function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

var animate = false;

// Function activated when scrolling
$(window).scroll(function() {
    // Check if the element is visible
    if(isScrolledIntoView("#r-latest-news-slider") && !animate) {
        owl.trigger('play.owl.autoplay', [1000]);
        animate = true;

        console.log('Starting animation');
    } else if(!isScrolledIntoView("#r-latest-news-slider") && animate) {
        owl.trigger('stop.owl.autoplay', [1000]);
        animate = false;

        console.log('Stopping animation');
    }
});
...