Изменение скорости смены слайдов

В стандартных слайдерах Тильды настройка скорости смены слайдов может принимать лишь 2 значения: быстро (300 мс) и медленно (500 мс). Но что, если вам нужно задать свою скорость или функцию плавности анимации? На помощь придёт эта модификация. Посмотреть пример работы можно в самом низу страницы.

Инструкция:
Зайдите в Настройки блока → Стиль галереи и выберите внизу параметр скорости «Быстро» или «Медленно» (не важно, какой вы выберите).

Скорость автопроигрывания всегда выставляйте больше, чем скорость смены слайдов.

Настройки → Стиль галереи → Скорость анимации

Скопируйте ID блока со слайдером. Если у вас слайдер в Zero-блоке, то нажмите на него правой кнопкой мыши и выберите «Add CSS Class Name». В появившемся справа в настройках поле задайте class, например gallery.

Следом выберите в форме ниже тип блока, вставьте его ID (и class, если это Zero-блок), задайте свою скорость смены слайдов в миллисекундах и выберите тип функцию плавности (по умолчанию в Тильде также стоит ease-in-out). Скопируйте код и вставьте его в блок T123 под слайдером.

<!-- Изменение скорости смены слайдов | https://necodim.ru/tilda/slider-speed -->

<style>
#rec123456789 .t-slds_animated {
    -webkit-transition: height ease-in-out 2000ms, transform ease-in-out 2000ms !important;
    -moz-transition: height ease-in-out 2000ms, transform ease-in-out 2000ms !important;
    -o-transition: height ease-in-out 2000ms, transform ease-in-out 2000ms !important;
    transition: height ease-in-out 2000ms, transform ease-in-out 2000ms !important;
}
</style>

<script>
t_onReady(() => {
    document.querySelector('#rec123456789 .t-slds__items-wrapper').setAttribute('data-slider-transition', 2000);
});
</script>

Скопировать код

Продвинутые пользователи могут задавать и свою функцию плавности анимации с помощью метода cubic-bezier. Но это уже на ваше усмотрение ;)

P. S. Модификация работает с любым стандартным слайдером, кроме Stories.

Смотрите также