Слайдер из зеро-блоков на Тильде

Этот слайдер полностью собирается в Zero Block и не зависит от стандартных блоков Тильды. Вы самостоятельно размещаете изображения, карточки или любой другой контент в Zero, а код обеспечивает корректное переключение слайдов и работу кастомных стрелок.

Слайдер работает стабильно в пределах одной страницы и масштабируется под любое число элементов.

⠀

Пример

Пример применения

⠀

Инструкция

❗️ ВАЖНО:

Чтобы код работал на вашем сайте проверьте, что у вас включен jQuery в настройках сайта.

Настройки сайта ⟶ Вкладка Вставка кода ⟶ Ставим галочку у «Подключить jQuery на страницах сайта»

⠀

1️⃣  ДОБАВЛЯЕМ СЛАЙД

• Добавляем zero-блок и наполняем его.
• Добавляем 2 стрелки (левую и правую).
• Задаем стрелкам классы: левой – .uc-arrow-left, правой – .uc-arrow-right
• Всему блоку зеро первого слайда задаем класс: .uc-slide-1

⠀

2️⃣ ДРУГИЕ СЛАЙДЫ
Далее дублируем зеро блок слайда, наполняем следующий слайд, повторяем до нужного кол-ва слайдов. Задаем каждому зеро блоку со слайдом соответствующий класс:

• второй слайд – .uc-slide-2
• третий – .uc-slide-3
• и т.д.

❗️ ВАЖНО:

Не трогаем стрелки. Они должны быть на всех слайдах на одном и том же месте.

⠀

3️⃣  НИЖЕ ВСТАВЛЯЕМ КОД

⠀

Код для вставки

<style>
[class*="uc-slide-"] {
display: none;
opacity: 0;
transition: opacity .35s ease;
}

.uc-slide-active {
display: block !important;
opacity: 1 !important;
}

.uc-arrow-left, .uc-arrow-right {
cursor: pointer;
user-select: none;
}
</style>


<script>
(function(){
function getSlideNumber(el){
const m = [...el.classList].join(' ').match(/uc-slide-(\d+)/);
return m ? parseInt(m[1],10) : null;
}

const allSlides = [...document.querySelectorAll('[class*="uc-slide-"]')]
.filter(el => getSlideNumber(el) !== null);

if (!allSlides.length) return;

const groups = [];
let currentGroup = [];

allSlides.forEach((el) => {
const num = getSlideNumber(el);

if (num === 1 || !currentGroup.length) {
if (currentGroup.length) groups.push(currentGroup);
currentGroup = [el];
} else {
const expected = getSlideNumber(currentGroup[currentGroup.length - 1]) + 1;
if (num === expected) {
currentGroup.push(el);
} else {
groups.push(currentGroup);
currentGroup = [el];
}
}
});
if (currentGroup.length) groups.push(currentGroup);

groups.forEach(group => {
group.forEach(s => s.classList.remove('uc-slide-active'));
group[0].classList.add('uc-slide-active');

group.forEach((slide, idx) => {
const left = slide.querySelector('.uc-arrow-left');
const right = slide.querySelector('.uc-arrow-right');

function show(i){
group.forEach(s => s.classList.remove('uc-slide-active'));
group[i].classList.add('uc-slide-active');
}

if (left) left.addEventListener('click', () => {
const cur = group.findIndex(s => s.classList.contains('uc-slide-active'));
const next = (cur - 1 + group.length) % group.length;
show(next);
});

if (right) right.addEventListener('click', () => {
const cur = group.findIndex(s => s.classList.contains('uc-slide-active'));
const next = (cur + 1) % group.length;
show(next);
});
});
});
})();
</script>

⠀

Смотреть модификацию на сайте:

Больше модификаций на Tilda: