Как сделать слайдер для изображений в Zero Block

При помощи данной модификации можно сделать стильный слайдер для изображений в Zero Block. Модификация имеет больше количество настроек и легко адаптируется. Отличная альтернатива стандартной галерее в зеро блок.

Модификация обновлена. Появилась возможность включить автоматическую смену изображений через заданный интервал

Модификация работает с включенным Autoscale в блоках

Модификация работает только с Zero Block

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

Класс контейнера

Ссылки на изображения

Скорость анимации

Ширина неактивных изображений в %

Радиус углов неактивных изображений

Радиус углов активного изображения

Растояние между изображениями

Тип переключения изображений

Автоматическое пролистывание

Время в мс

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

оплатить

Этот генератор кода доступен только тем кто оплатил подписку

<div class="TCDGalery" style="margin: 0 auto; height: 100%;"></div> <style> .TCDGalery { max-width: 100%; height: 100%; display: flex; justify-content: space-between; } .TCDcard { width: 10%; height: 100%; transition: all 0.5s; border-radius: 20px; background-position: center center; cursor: pointer; background-size: cover; } .TCDcard:first-child { width: 100%; border-radius: 20px; } .TCDopen { border-radius: 20px; width: 100% !important; } .TCDshrunk { width: 10% !important; } .TCDcard + .TCDcard { margin-left: 10px; } </style> <script> (function(){ const TCDimageUrls = 'https://static.tildacdn.one/307df10c-fb67-469d-8718-e9bcc7c1f48c/photo1455793067932146d5b4a694f.jpeg, https://static.tildacdn.one/586f97c2-a573-4ac6-b8cf-fdc98c19b520/photo14557355834935ab52897f7eb.jpeg, https://static.tildacdn.one/12ce6b4a-3d4c-4bc8-9037-c363045ae0b3/photo145579322212098f37a8d4ede.jpeg, https://static.tildacdn.one/12ce6b4a-3d4c-4bc8-9037-c363045ae0b3/photo145579322212098f37a8d4ede.jpeg, https://static.tildacdn.one/12ce6b4a-3d4c-4bc8-9037-c363045ae0b3/photo145579322212098f37a8d4ede.jpeg'; const TCDGalery = document.querySelector('.TCDGalery'); const TiCodecarts = []; const TCDurlsArray = TCDimageUrls.split(',').map(url => url.trim()); let isAutoslideshow = false; let isHoverFixed = false; let isClickChange = false; let isSlideshowRunning = false; let currentSlide = 0; let slideInterval; TCDurlsArray.forEach((url) => { const TCDcard = document.createElement('div'); TCDcard.classList.add('TCDcard'); TCDcard.style.backgroundImage = `url("${url}")`; TCDGalery.appendChild(TCDcard); TiCodecarts.push(TCDcard); }); function setGalleryHeight() { const parentHeight = TCDGalery.parentElement.clientHeight; TCDGalery.style.height = `${parentHeight}px`; } window.addEventListener('resize', setGalleryHeight); window.addEventListener('load', setGalleryHeight); function expandCard(TCDcard) { resetCards(); TCDcard.classList.add('TCDopen'); const siblings = TiCodecarts.filter(sibling => sibling !== TCDcard); siblings.forEach(sibling => sibling.classList.add('TCDshrunk')); } function resetCards() { TiCodecarts.forEach(TCDcard => { TCDcard.classList.remove('TCDopen'); TCDcard.classList.remove('TCDshrunk'); }); } function nextSlide() { resetCards(); currentSlide = (currentSlide + 1) % TiCodecarts.length; expandCard(TiCodecarts[currentSlide]); } function startSlideshow() { if (!isSlideshowRunning && isAutoslideshow) { slideInterval = setInterval(nextSlide, ); isSlideshowRunning = true; } } function stopSlideshow() { clearInterval(slideInterval); isSlideshowRunning = false; } TiCodecarts.forEach((TCDcard) => { TCDcard.addEventListener('mouseenter', () => { if (!isClickChange) { stopSlideshow(); expandCard(TCDcard); } }); TCDcard.addEventListener('mouseleave', () => { if (!isHoverFixed && !isClickChange) { resetToFirstSlide(); startSlideshow(); } else if (isHoverFixed || isClickChange) { startSlideshow(); } }); TCDcard.addEventListener('click', () => { if (isClickChange) { stopSlideshow(); expandCard(TCDcard); } }); }); function resetToFirstSlide() { resetCards(); currentSlide = 0; expandCard(TiCodecarts[currentSlide]); } window.onload = () => { expandCard(TiCodecarts[currentSlide]); startSlideshow(); }; TCDGalery.addEventListener('mouseleave', () => { if (!isHoverFixed && !isClickChange) { resetToFirstSlide(); startSlideshow(); } else if (isHoverFixed || isClickChange) { startSlideshow(); } }); })(); </script>

КОПИРОВАТЬ КОД

Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта

1. Создаем блок GL02 и загружаем в него картинки. Копируем ссылки картинок и вставляем в генератор кода в поле "Ссылки на изображения" изображения указываем через запятую с пробелом. Например: https://static.tildacdn.one/tild3438-6435-4735-a630-626661346535/devi-puspita-amartha.jpg, https://static.tildacdn.one/tild3236-6562-4436-b935-643637393663/devi-puspita-amartha.jpg, и т. д.

2. Блок GL02 скрываем, кликнув на глаз. Блок нельзя удалять!

3. Указываем дополнительные настройки в генераторе кода:
Скорость анимации - указываем скорость проигрывания анимации;
Ширина неактивных изображений в % - указываем ширину неактивных картинок. Например если у вас 5 картинок и указано 10%, то при загрузке страницы у вас активная картинка будет занимать 60% площади и 4 неактивных картинки по 10%. Если указали 5%, то активная картинка будет занимать 80%.
Радиус углов неактивных изображений - указываем радиус скругления углов неактивных изображений;
Радиус углов активного изображения - указываем радиус скругления углов активного изображения;
Расстояние между изображениями - указываем отступ между изображениями;
Тип переключения изображений - при наведении без фиксации изображение будет увеличиваться при наведении курсора и уменьшатся как только курсор убрали. При наведении с фиксацией - изображение увеличивается и фиксируется в таком размере пока не наведут курсор на другое изображение. При клике - изображение увеличивается при клике и уменьшается когда кликнули на другое изображение. На мобилках переключение работает только при клике, так как отсутствует курсор;
Автоматическое пролистывание - если включено, то можно в поле "Время в мс" указать время для автоматического пролистывания изображений. Указывать нужно в миллисекундах. Например, чтобы пролистывать каждые три секунды указываем 3000; При наведении курсора на активное изображение, механика пролистывания ставиться на паузу.

3. Копируем готовый код и вставляем в HTML контейнер внутри Zero Block. Галерея будет занимать всю площадь контейнера, поэтому для адаптации достаточно менять ширину и высоту HTML контейнера.

Примечание! Если на одной странице нужно сделать два и больше слайдера, то задаем каждой галерее уникальный класс в поле "Класс контейнера"