При добавлении блока CR30N с включенным автоматическим пролистыванием можно столкнуться с проблемой, когда на опубликованной странице блок не пролистывает. Это происходит из-за того, что при наведении курсора на зону слайда анимация пролистывания ставится на паузу. Довольно часто такой блок занимает 100% высоты экрана, и запустить автоматическое пролистывание так и не удается, поскольку для этого пользователю нужно немного прокрутить страницу и убрать курсор за пределы блока. В итоге получается, что пользователь либо смотрит весь слайдер и листает слайды вручную, либо видит только часть слайдера, но с автоматической сменой слайдов.
С помощью этой модификации можно отключить паузу в стандартном блоке CR30N при наведении курсора.
С помощью этой модификации можно отключить паузу в стандартном блоке 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 на основе ползунка: Пример слайдера, где используется ползунок для переключения слайдов.
