Отключение паузы при наведении курсора в слайдере CR30N

2025-01-02 00:22 Слайдеры

При добавлении блока CR30N с включенным автоматическим пролистыванием можно столкнуться с проблемой, когда на опубликованной странице блок не пролистывает. Это происходит из-за того, что при наведении курсора на зону слайда анимация пролистывания ставится на паузу. Довольно часто такой блок занимает 100% высоты экрана, и запустить автоматическое пролистывание так и не удается, поскольку для этого пользователю нужно немного прокрутить страницу и убрать курсор за пределы блока. В итоге получается, что пользователь либо смотрит весь слайдер и листает слайды вручную, либо видит только часть слайдера, но с автоматической сменой слайдов.

С помощью этой модификации можно отключить паузу в стандартном блоке CR30N при наведении курсора.

Инструкция по установке

Копируем код в HTML блок T123;
Указываем id своего блока слайдера;

<!--TICODE --><!-- Отключение паузы в блоке CR30N | https://ticode.dev  -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    const TCDidCR30N = '#rec847683868'; /* Id блока CR30N */
    const TCDblock = document.querySelector(TCDidCR30N);

    if (TCDblock) {
        const sliderWrapper = TCDblock.querySelector('.t-slds__items-wrapper');
        
        if (sliderWrapper) {
            sliderWrapper.addEventListener('mouseover', function () {
                sliderWrapper.setAttribute('data-slider-stopped', '');
            });
            const ticodeobserver = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    if (
                        mutation.attributeName === 'data-slider-stopped' &&
                        sliderWrapper.getAttribute('data-slider-stopped') === 'yes'
                    ) {
                        sliderWrapper.setAttribute('data-slider-stopped', '');
                    }
                });
            });
            ticodeobserver.observe(sliderWrapper, {
                attributes: true,
                attributeFilter: ['data-slider-stopped'],
            });
        }
    }
});
</script>

Другие модификации для слайдеров на Тильда

Простой слайдер в Zero Block: Простая реализация слайдера в Zero Block с минимальными настройками.
Слайдер на Zero Block с собственными стрелками и табами: Более продвинутый слайдер с дополнительными элементами управления, такими как стрелки и табы.
Слайдер До/После в Zero Block: Создание слайдера, который позволяет сравнивать изображения до и после.
Слайдер для изображений в Zero Block: Слайдер для динамического показа изображений
Слайдер в Zero Block на основе ползунка: Пример слайдера, где используется ползунок для переключения слайдов.

{$co}