URL скопирован в буфер обмена!
Как сделать слайдер на Zero Block?
Модификация поможет объединить несколько Zero Block в слайдер и переключать их при помощи стрелок, точек(bullet) или свайпов(только на моб. устройствах).
Модификация обновлена. Исправлена ошибка когда при наличии двух и более слайдеров на одной странице, при клике на bullet переключались слайды сразу во всех слайдерах. Появилась возможность открывать сразу нужный слайд при заходе на сайт. Дополнительно можно принудительно открывать нужный слайд при помощи ссылки добавляя в нее /#bullet1 Подробнее в инструкции.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
id Zero Block через запятую
Класс для кнопки вперед
Класс для кнопки назад
Ссылка для табов
Номер слайда при старте
Зацикливание
Пролистывание свайпом на мобилках
Показывать слайдер на экранах
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD019--><script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.touchSwipe.min.js"></script>
<script>
$(document).ready(function(){
let next = '.tc-next';
let prev = '.tc-prev';
let pagination = '#bullet';
let carousel = true;
let slides = '#rec510853759, #rec510854132';
let screens = [
{ min: 0, max: 480, active: true },
{ min: 480, max: 640, active: true },
{ min: 640, max: 960, active: true },
{ min: 960, max: 1200, active: true },
{ min: 1200, max: 10000, active: true },
];
let debug = false;
let script = '[TICODE-SLIDER]: ';
let active = true;
let arBlocks = slides.split(',');
let current = 0;
init();
$(next).click(function() {
slideNext();
});
$(prev).click(function() {
slidePrev();
});
$(document).on('click', '[href*="' + pagination + '"]', function (event) {
event.preventDefault();
if (false === active) return null;
let index = parseInt($(this).attr('href').replace(pagination, ''), 10);
if (!isNaN(index)) {
current = index - 1;
slide(current);
}
});
$(slides).swipe({
swipeRight: function(event, direction, distance, duration, fingerCount) {
slidePrev();
},
swipeLeft: function(event, direction, distance, duration, fingerCount) {
slideNext();
},
threshold:75
});
function init() {
log('Скрипт запущен');
checkScreen();
if (false === active) return null;
let slideNumber = getSlideNumberFromHash();
if (slideNumber !== null) {
current = slideNumber - 1;
}
setTimeout(function () {
reloadAnimation(current);
hideAllSlides();
showSlide(current);
updateHash(current + 1);
}, 100);
}
function checkScreen() {
let width = $(window).width();
screens.forEach(function (item, i, arr) {
if (width > item.min && width <= item.max) active = item.active;
});
}
function slideNext() {
if (false === active) return null;
if (current + 1 === arBlocks.length && carousel === true) {
current = -1;
}
if (current + 1 < arBlocks.length) {
current++;
slide(current);
}
}
function slidePrev() {
if (false === active) return null;
if (current === 0 && carousel === true) {
current = arBlocks.length;
}
if (current - 1 >= 0) {
current--;
slide(current);
}
}
function slide(n) {
setTimeout(function () {
reloadAnimation(n);
hideAllSlides();
showSlide(n);
updateHash(n + 1);
}, 100);
}
function hideAllSlides() {
arBlocks.forEach(function (item, i, arr) {
hide($(item));
});
}
function showSlide(n) {
show($(arBlocks[n]));
if ("y" === window.lazy) {
t_lazyload_update();
}
if (typeof t_slds_updateSlider != "undefined") {
let idPart = arBlocks[n].replace('#rec', '');
t_slds_updateSlider(idPart);
}
}
function reloadAnimation(n) {
$current = $(arBlocks[n]);
arBlocks.forEach(function (item, i, arr) {
$(item).find('.t396__elem').each(function (i, e) {
$(this).removeClass('t-sbs-anim_started t-animate_started');
});
});
$current.find('.t396__elem').each(function (i, e) {
$(this).addClass('t-sbs-anim_started t-animate_started');
});
arBlocks.forEach(function (item, i, arr) {
$(item).find('.t396__elem[data-animate-style]').each(function (i, e) {
$(this).removeClass('t-animate_started');
});
});
setTimeout(function () {
$current.find('.t396__elem[data-animate-style]').each(function (i, e) {
$(this).addClass('t-animate_started');
});
}, 100);
}
function hide($element) {
$element.css({
'display': 'none'
});
log('Скрыт элемент ticode' + $element.attr('id'));
}
function show($element) {
$element.css({
'display': 'block'
});
log('Показан элемент ticode' + $element.attr('id'));
}
function log(message) {
if (debug) console.log(script + message);
}
function getSlideNumberFromHash() {
let hash = window.location.hash;
if (hash && hash.indexOf('#bullet') === 0) {
let slideNumber = parseInt(hash.replace('#bullet', ''), 10);
if (!isNaN(slideNumber) && slideNumber >= 1 && slideNumber <= arBlocks.length) {
return slideNumber;
}
}
return null;
}
function updateHash(slideNumber) {
var newHash = '#bullet' + slideNumber;
window.location.hash = newHash;
setTimeout(function() {
history.replaceState({}, document.title, window.location.pathname + window.location.search);
}, 500);
}
});
</script>
<style>
.tc-next { cursor: pointer; }
.tc-prev { cursor: pointer; }
</style>
<script> (function updateRecordType() { const scriptElement = document.currentScript; if (scriptElement) { const recordElement = scriptElement.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем Zero Block и добавляем в него кнопки (это может быть кнопка, шейп, текст или картинка) для переключения слайдов. Назначаем классы для кнопок:
для кнопки пролистывания вперед tc-next
для кнопки пролистывания назад класс tc-prev
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. При необходимости можно добавить точки(bullet) для переключения. Они будут выполнять роль переключения табами. В качестве точек можно использовать шейп, кнопки текст или картинку. Количество точек должно быть равно количеству ваших слайдов. Каждой точке назначаем ссылку #bullet + порядковый номер. Если слайда три, то должно быть три точки с ссылками #bullet1, #bullet2, #bullet3
3. Дублируем Zero Block столько раз сколько вам нужно слайдов и меняем в блоке контент. Элементы, которые выступают навигацией оставляем в каждом блоке.
4. Копируем id всех Zero Block, которые выступают слайдами и указываем их в генераторе через запятую.
5. При необходимости делаем дополнительные настройки в генераторе кода
Зацикливание - если включено, то после достижении последнего слайда переключит на первый. Если отключено, то при достижении последнего слайда пролистать вперед нельзя будет.
Пролистывание свайпом на мобилках - если включено, то на мобилка можно листать слайды свайпом;
Показывать слайдер на экранах - при необходимости указываем экраны на которых слайды будут показываться в слайдере. На других экранах блоки будут идти друг за другом как обычно;
Номер слайда при старте - указываем номер слайда который нужно открыть при заходе на сайт. Счет начинается с нуля. Для открытия первого слайда оставляем 0, для открытия второго указываем 1 и т. д.
При использовании bullet можно принудительно открывать нужный слайд. Например в генераторе у вас стоит 1 (это значит что при заходе на сайт всегда будет открыт 2 слайд). Но если вы на другой странице укажите в кнопке ссылку формата https://ваш-сайт/#bullet1 то при переходе, по такой ссылке будет открыт первый слайд.
6. Копируем готовый код и вставляем в HTML блок Т123
Примечание: Если указать в генераторе кода настройку "показывать слайдер на экранах", например на экранах до 480, то на экранах больше 480, блоки будут идти по порядку, а на экранах до 480 отображаться в виде слайдера. Если необходимо чтобы на экранах больше 480 блоки не отображались, то в Zero Block нужно поставить высоту блока 0 для всех экранов больше 480.
для кнопки пролистывания вперед tc-next
для кнопки пролистывания назад класс tc-prev
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. При необходимости можно добавить точки(bullet) для переключения. Они будут выполнять роль переключения табами. В качестве точек можно использовать шейп, кнопки текст или картинку. Количество точек должно быть равно количеству ваших слайдов. Каждой точке назначаем ссылку #bullet + порядковый номер. Если слайда три, то должно быть три точки с ссылками #bullet1, #bullet2, #bullet3
3. Дублируем Zero Block столько раз сколько вам нужно слайдов и меняем в блоке контент. Элементы, которые выступают навигацией оставляем в каждом блоке.
4. Копируем id всех Zero Block, которые выступают слайдами и указываем их в генераторе через запятую.
5. При необходимости делаем дополнительные настройки в генераторе кода
Зацикливание - если включено, то после достижении последнего слайда переключит на первый. Если отключено, то при достижении последнего слайда пролистать вперед нельзя будет.
Пролистывание свайпом на мобилках - если включено, то на мобилка можно листать слайды свайпом;
Показывать слайдер на экранах - при необходимости указываем экраны на которых слайды будут показываться в слайдере. На других экранах блоки будут идти друг за другом как обычно;
Номер слайда при старте - указываем номер слайда который нужно открыть при заходе на сайт. Счет начинается с нуля. Для открытия первого слайда оставляем 0, для открытия второго указываем 1 и т. д.
При использовании bullet можно принудительно открывать нужный слайд. Например в генераторе у вас стоит 1 (это значит что при заходе на сайт всегда будет открыт 2 слайд). Но если вы на другой странице укажите в кнопке ссылку формата https://ваш-сайт/#bullet1 то при переходе, по такой ссылке будет открыт первый слайд.
6. Копируем готовый код и вставляем в HTML блок Т123
Примечание: Если указать в генераторе кода настройку "показывать слайдер на экранах", например на экранах до 480, то на экранах больше 480, блоки будут идти по порядку, а на экранах до 480 отображаться в виде слайдера. Если необходимо чтобы на экранах больше 480 блоки не отображались, то в Zero Block нужно поставить высоту блока 0 для всех экранов больше 480.
TiCode это хороший сервис со скриптами, но не для программистов. Так, эффектики для тильда еще есть. Ну, ещё есть какой-то Линкбилдер, куда закидываешь телефоны/ники и получаешь ссылку для соц. сетей на свой сайт. Вообще он меня бесит, вот! Ещё чё. Огромная библиотека модификаций которая расширяет функционал тильда и делает меня человеком. Рекомендую, вот и все.
<
>
Я - Никита Литвинков
1 / 3
А я не понял. Что вы делаете на этом сайте? Вы хотите верстать крутые проекты на Tilda? Хотите слайдеры на Zero Block? Хотите кастомные формы? Все это я нашел здесь. Теперь я делаю проекты которые легко попадают в #madeontilda. Однозначно рекомендую эту платформу как новичкам так и дизайнерам с опытом
— Генадий Горин
2 / 3
<
>
Наткнулся на TiCode совершенно случайно. Думал ничего необычного я тут не найду, но как же я ошибался. Огромная база модификаций, которые устанавливаются на тильда за пару минут, благодаря генераторам кода. Этот сервис должен быть в закладках у каждого дизайнера. Тикод помог прокачать не только мои сайты на Тильда, но и мои руки.
— Кирил Терешин
3 / 3
<
>
