URL скопирован в буфер обмена!
Как сделать слайдер на основе ползунка из формы в Zero Block
С помощью этой модификации можно сделать слайдер на зеро блок с возможностью переключения слайдов при помощи ползунка. Переключить можно как контент в рамках блока так и зеро блоки целиком. Есть поддержка sbs анимации.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Тип слайдера
Класс контента
ID блока с ползунком
Переменная ползунка
Класс для счетчика
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD077--><style>
.TCD-hidden-content {
pointer-events: none !important;
opacity: 0 !important;
max-height: 0px;
}
#rec770454345 .t-range__value-txt,
#rec770454345 .t-range__interval-txt_min,
#rec770454345 .t-range__interval-txt_max {
display: none !important;
}
</style>
<script>
$(window).on('load', function() {
var TICont = $('[class*="ti-slide-"]');
TICont.addClass('TCD-hidden-content');
var TICurentStep = $('.ti-step .tn-atom');
var uniqueSlideClasses = [];
TICont.each(function() {
var slideClass = $(this).attr('class').match(/ti-slide-\d+/)[0];
if (uniqueSlideClasses.indexOf(slideClass) === -1) {
uniqueSlideClasses.push(slideClass);
}
});
var slideCount = uniqueSlideClasses.length;
var steps = [];
for (var i = 0; i < slideCount; i++) {
steps.push(Math.round((100 / (slideCount - 1)) * i));
}
var currentSlideIndex = 0;
function showClosestSlide(step) {
var closestStep = steps.reduce(function(prev, curr) {
return Math.abs(curr - step) < Math.abs(prev - step) ? curr : prev;
});
var slideIndex = steps.indexOf(closestStep);
if (slideIndex !== currentSlideIndex) {
currentSlideIndex = slideIndex;
TICurentStep.text((slideIndex + 1) + "/" + slideCount);
TICont.addClass('TCD-hidden-content');
$(`.${uniqueSlideClasses[slideIndex]}`).removeClass('TCD-hidden-content');
setTimeout(function() {
t_lazyload_update();
$(`.${uniqueSlideClasses[slideIndex]} `).removeClass('t-sbs-anim_started t-animate_started');
}, 0);
setTimeout(function() {
$(`.${uniqueSlideClasses[slideIndex]} `).addClass('t-sbs-anim_started t-animate_started');
}, 300);
}
}
function initSlider() {
$(`.${uniqueSlideClasses[0]}`).removeClass('TCD-hidden-content');
showClosestSlide(0);
}
var TCDTimer = setInterval(function() {
var TCDcontrol = $('[name="ti-control"]');
var num = TCDcontrol.val();
showClosestSlide(num);
if (TCDcontrol.length > 0) {
clearInterval(TCDTimer);
TCDcontrol.on('input', function() {
var TCDcurentStep = $(this).val();
showClosestSlide(TCDcurentStep);
});
}
}, 300);
initSlider();
});
</script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Выбираем в генераторе тип слайдера: 1. Контент внутри Zero Block - слайдер будет работать в рамках одного зеро блока и переключать контент внутри блока. 2. Zero Block целиком - слайдер будет переключать зеро блоки.
2. Если выбрали первый тип слайдера, то в Zero Block создаем любой контент и присваиваем ему классы ti-slide-1, ti-slide-2, ti-slide-3 и т. д. Весь контент с классом ti-slide-1 будет показан на первом слайде, ti-slide-2 на втором и т. д.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Если выбрали второй тип слайдера, то создаем зеро блоки и присваиваем им класс uc-slide-1, uc-slide-2, uc-slide-3
3. Добавляем еще один зеро блок, копируем id и вставляем в генератор в поле "Id блока с ползунком"
4. Создаем внутри блока форму с полем ввода Quantity (range slider) и убираем кнопку. Для этого удаляем в кнопке текст и ставим ширину и высоту 0
В форме для ползунка указываем следующие настройки:
VARIABLE NAME - ti-control
VALUE - 1
MIN VALUE - 1
MAX VALUE - 100
STEP SIZE - 1
Должно получиться как на скрине
При необходимости можно вывести счетчик слайдов формата 1/99. Для этого создаем в зеро блоке с формой текстовый элемент. Вместо текста заглушки пишем 1/(количество ваших слайдов) и присваиваем ему класс ti-step Например, если слайда три, то пишем 1/3
5. Копируем готовый код и вставляем в HTML блок Т123. Блок T123 должен быть расположен ниже зеро блоков со слайдами и блока с формой;
Примечание! В зеро блоке есть лимит по количеству элементов (около 300 элементов). Учитывайте это если хотите переключать контент в рамках зеро блока. Подробнее с лимитами Тильда можно ознакомиться в этой статье
2. Если выбрали первый тип слайдера, то в Zero Block создаем любой контент и присваиваем ему классы ti-slide-1, ti-slide-2, ti-slide-3 и т. д. Весь контент с классом ti-slide-1 будет показан на первом слайде, ti-slide-2 на втором и т. д.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Если выбрали второй тип слайдера, то создаем зеро блоки и присваиваем им класс uc-slide-1, uc-slide-2, uc-slide-3
3. Добавляем еще один зеро блок, копируем id и вставляем в генератор в поле "Id блока с ползунком"
4. Создаем внутри блока форму с полем ввода Quantity (range slider) и убираем кнопку. Для этого удаляем в кнопке текст и ставим ширину и высоту 0
В форме для ползунка указываем следующие настройки:
VARIABLE NAME - ti-control
VALUE - 1
MIN VALUE - 1
MAX VALUE - 100
STEP SIZE - 1
Должно получиться как на скрине
При необходимости можно вывести счетчик слайдов формата 1/99. Для этого создаем в зеро блоке с формой текстовый элемент. Вместо текста заглушки пишем 1/(количество ваших слайдов) и присваиваем ему класс ti-step Например, если слайда три, то пишем 1/3
5. Копируем готовый код и вставляем в HTML блок Т123. Блок T123 должен быть расположен ниже зеро блоков со слайдами и блока с формой;
Примечание! В зеро блоке есть лимит по количеству элементов (около 300 элементов). Учитывайте это если хотите переключать контент в рамках зеро блока. Подробнее с лимитами Тильда можно ознакомиться в этой статье
