Как исправить проблему с распознаванием паузы у карусели при клике на навигационные элементы?

Question

[ligisayan]

Всем привет!
Есть сайт на wordpress с установленным плагином SiteOrigin Widgets Bundle, который имеет в своём составе карусель, построенной на библиотеке слайдера slick.

У этой карусели есть проблема при автоматической прокрутке: если выждать некоторое время до перехода к следующему слайду (но меньшее, чем необходимо для пролистывания) и самому нажать на навигационные элементы (стрелки или буллеты), то время паузы во время следующего слайда окажется меньше, чем заложено в таймауте, т.е. посетитель не успевает толком просмотреть слайд как он уже прокрутился вперёд.

Полагаю, что такое поведение связано с кастомной реализаций прокрутки в данной карусели в этом фрагменте кода

// Set up Autoplay. We use a custom autoplay rather than the Slick
// autoplay to account for the (sometimes) non-standard nature of our
// navigation that Slick has trouble accounting for.
if ( carouselSettings.autoplay ) {
    var interrupted = false;
    var autoplayNav = $$.parent().parent().find( '.sow-carousel-' + ( $$.data( 'dir' ) == 'ltr' ? 'next' : 'prev' ) );
    // Check if this is a Block Editor preview, and if it is, don't autoplay.
    if ( ! $( 'body' ).hasClass( 'block-editor-page' ) ) {
        setInterval( function() {
            if ( ! interrupted ) {
                autoplayNav.trigger( 'click' );
            }
        }, carouselSettings.autoplaySpeed );

        if ( carouselSettings.pauseOnHover ) {
            $items.on('mouseenter.slick', function() {
                interrupted = true;
            } );
            $items.on( 'mouseleave.slick', function() {
                interrupted = false;
            } );
        }
    }
}

Как можно устранить проблему и наладить отсчет времени на прокрутку с момента переключения слайда независимо автоматически он прокрутился или принудительно по клику пользователем?
Полный gist c кодом карусели находится здесь

Answer 1

[Виталий Першин]

Попробуйте так https://github.com/get-web/so-widgets-bundle/blob/...

Comments

[ligisayan]

Виталий Першин благодарю, но дело в том, что навигационные элементы (стрелки и буллеты) находятся внутри контейнера со слайдером sow-carousel-container, но снаружи по отношению slick-initialized slick-slider, а значит mouseenter и mouseenter непосредственно их не затрагивают и нужные события не сработают..

[Виталий Першин]

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

[ligisayan]

Виталий Першин, залил в проект и сидел с таймером всё проверял: настроил его на прокрутку через 8 сек.
Частично вы оказались правы: на стрелках (влево/вправо) стало работать, как и положено со сбросом счетчика (спасибо!), но вот на булетах .slick-dots не срабатывает, тестировал много раз: 7 секунд выжидаю, нажимаю на точки и слайд перелистывается через секунду ещё на один.
И что ещё заметил: если ивент на клике отслеживаю в консоли, то он фиксируется только по внутреннему триггеру слайдера, а при пользовательском нажатии нет, не знаю почему..

[Виталий Першин]

ligisayan, Обновил файл, проверьте

[ligisayan]

Виталий Першин, неа, не сработало.
Вижу, что в коде вы добавили сброс таймера внутрь

if ( carouselSettings.dots && ( $$.data( 'variable_width' ) || $$.data( 'carousel_settings' ).theme ) ) {..}

Но, самое интересное, что это условие не отрабатывает в силу $$.data( 'variable_width' ) = undefined и $$.data( 'carousel_settings' ).theme = undefined

Я правильно понял, что функция обработки кликов буллетов была заведена только при заданных выше параметрах? А, если их не задавать, то обработчика на буллетах вовсе нет и нет тогда сброса таймера для такого случая?

[Виталий Першин]

ligisayan,

Я правильно понял, что функция обработки кликов буллетов была заведена только при заданных выше параметрах?

Я вообще не очень понимаю, зачем все эти жуткие абстракции над нативным slick, но судя по комментарию, да, там используются дефолтные булеты, если не заданы параметры

[ligisayan]

Виталий Першин, сразу после текущей, прописал следующую инструкцию и буллеты заработали так, как надо!

else if ( carouselSettings.dots ) {
        $$.find( '.slick-dots li' ).on( 'click touchend', function() {
           // Reset autoplay
	   clearInterval(autoplayInterval);
	   autoplayInterval = autoplay();
        });
}