Регистрация
Личный кабинет
Регистрация
Личный кабинет

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

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

Тут на помощь придёт эта модификация. Зайдите в Настройки блока → Стиль галереи и выберите внизу параметр скорости «Быстро» или «Медленно» (не важно, какой вы выберите).
Настройки → Стиль галереи → Скорость анимации
Настройки → Стиль галереи → Скорость анимации
Следом задайте в форме ниже свою скорость в миллисекундах и выберите тип функцию плавности (по умолчанию в Тильде также стоит ease-in-out). Скопируйте код и вставьте его в блок T123 под слайдером.
<!-- Изменение скорости смены слайдов | https://necodim.ru/tilda/slider-speed -->
<style>
.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>
$(function() {
    $('.t-slds__items-wrapper').attr('data-slider-transition', 2000);
});
</script>
Скопировать код
Продвинутые пользователи могут задавать и свою функцию плавности анимации с помощью метода cubic-bezier. Но это уже на ваше усмотрение ;)

Посмотрите пример слайдера со скоростью смены слайдов в 2 секунды и своей функцией плавности анимации: cubic-bezier(0.68, -0.55, 0.265, 1.55).

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