Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.02.2023, 23:48
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 163

[Решено]Как исправить проблему с распознаванием паузы у slick при клике на навигацию?
Есть сайт на 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 кодом карусели находится здесь

Последний раз редактировалось giwuf, 17.02.2023 в 00:21. Причина: Решение найдено
Ответить с цитированием
  #2 (permalink)  
Старый 08.02.2023, 01:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

giwuf,
мысли вслух ... строка 14

var timer;
                    $items.on('click.slick', function(event) {  //или просто 'click'
                        if (!event.isTrusted) return;
                        interrupted = true;
                        window.clearTimeout(timer);
                        timer = window.setTimeout(function() {
                            interrupted = false;
                        }, carouselSettings.autoplaySpeed);
                    });
Ответить с цитированием
  #3 (permalink)  
Старый 12.02.2023, 13:03
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 163

Сообщение от рони
рони
Спасибо, но, к сожалению, это решение не работает, т.к. при
items.on('click.slick', function(event) {  //или просто 'click'

ивент срабатывает только на самих слайдах, но не на навигационных элементах будь то кнопки навигации или буллеты.
Более того, если отслеживаю ивенты на кнопках .sow-carousel-next, .sow-carousel-prev, .slick-dots a, то он фиксируется только по внутреннему триггеру слайдера, а при пользовательском нажатии нет, не знаю почему..
Ответить с цитированием
  #4 (permalink)  
Старый 17.02.2023, 00:20
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 163

рони

Решением было сбросить таймер внутри ивента переключения стрелок:

$$.parent().parent().find( '.sow-carousel-previous, .sow-carousel-next' ).on( 'click touchend', function( e, refocus ) {
    ....

    // Reset autoplay
    clearInterval(autoplayInterval);
    autoplayInterval = autoplay();
});


И разместить обработчик буллетов
else if ( carouselSettings.dots ) {
        $$.find( '.slick-dots li' ).on( 'click touchend', function() {
           // Reset autoplay
     clearInterval(autoplayInterval);
     autoplayInterval = autoplay();
        });
}


сразу после
if ( carouselSettings.dots && ( $$.data( 'variable_width' ) || $$.data( 'carousel_settings' ).theme ) ) {...}
Ответить с цитированием
  #5 (permalink)  
Старый 17.02.2023, 00:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

giwuf,
Vivat!!! )))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как исправить в IE11, Edge задержку при событии scroll? s24344 Элементы интерфейса 2 11.09.2018 21:14
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
как при клике на фотографию увеличить ее, затемнив фон Ichigeki ExtJS 3 23.06.2011 17:34
Как подменять ФАЙЛ CSS при клике нассылку!!!! СРОЧНО ПОМОГИТЕ. pavdin Общие вопросы Javascript 4 02.12.2010 20:44
Как отменить прокрутку при клике Alekson jQuery 1 30.03.2009 20:53