Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
Всем у кого перестала работать sbs анимация и на странице используется слайдер от Тильдошной (или другой который использует в коде слайдер owl), добавьте в код setTimeout, на скриншоте показаны строки которые добавить.
ВНИМАНИЕ!
1) Создаем основной Zero блок и добавляем в него элемент «SHAPE», в котором будет наш слайдер. У «SHAPE» нужно убрать цвет заднего фона, рамки, тени.
2) Добавляем дополнительные несколько блоков, которые будут слайдами. Все элементы в слайдах должны быть выравнены «Container: Window — Left — Top». Положение этих элемента не меняем, всегда в левом верхнем углу, именно эту область будет «видеть» shape в первом блоке. Дополнительные элементы можно перемещать в границах этого элемента.Добавляем контент — изображения (обязательно отключаем lazy load), кнопки, текст, формы.
3) Размеры по высоте shape и элементов — слайдов должны быть одинаковы.
4) Вставляем код в блок T123 после всех Zero блоков действующих в скрипте
указываем вот эти параметры -
/* Указываем высоту слайда */
height: 300px !important;
/* Указываем ширину слайда */
width: 300px !important;
5) Узнаем id блоков, которые будут слайдами, блока в котором будет слайдер и class shape элемента, в основном блоке.
6) Заменяем id и class shape элемента в первых строках нашего кода.
8 строка — Id блока, в котором будет слайдер.
10 строка — class элемента, в котором будет слайдер.
12 строка — id блоков, через запятую, которые должны стать слайдами.
7) В блоке со слайдером добавляем два изображения под стрелочки и указываем им ссылки #slider_left для стрелочки влево и #slider_right для стрелочки вправо.
Настройки слайдера:
21 строка — цикличность слайдера.
25 строка — количество слайдов на одном экране (после изменения надо проверить чтобы все правильно отображалось)
28−43 строки — адаптивность. Можно изменить количество слайдов в мобильной или планшетной версии
(Номера строк будут видны когда разместите код в блок T123, в редакторе)
2) Добавляем дополнительные несколько блоков, которые будут слайдами. Все элементы в слайдах должны быть выравнены «Container: Window — Left — Top». Положение этих элемента не меняем, всегда в левом верхнем углу, именно эту область будет «видеть» shape в первом блоке. Дополнительные элементы можно перемещать в границах этого элемента.Добавляем контент — изображения (обязательно отключаем lazy load), кнопки, текст, формы.
3) Размеры по высоте shape и элементов — слайдов должны быть одинаковы.
4) Вставляем код в блок T123 после всех Zero блоков действующих в скрипте
указываем вот эти параметры -
/* Указываем высоту слайда */
height: 300px !important;
/* Указываем ширину слайда */
width: 300px !important;
5) Узнаем id блоков, которые будут слайдами, блока в котором будет слайдер и class shape элемента, в основном блоке.
6) Заменяем id и class shape элемента в первых строках нашего кода.
8 строка — Id блока, в котором будет слайдер.
10 строка — class элемента, в котором будет слайдер.
12 строка — id блоков, через запятую, которые должны стать слайдами.
7) В блоке со слайдером добавляем два изображения под стрелочки и указываем им ссылки #slider_left для стрелочки влево и #slider_right для стрелочки вправо.
Настройки слайдера:
21 строка — цикличность слайдера.
25 строка — количество слайдов на одном экране (после изменения надо проверить чтобы все правильно отображалось)
28−43 строки — адаптивность. Можно изменить количество слайдов в мобильной или планшетной версии
(Номера строк будут видны когда разместите код в блок T123, в редакторе)
Слайдер из Zero Block
Код
<!-- Тильдошная слайдер из Zero блоков -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
// Id блока, в котором будет слайдер
var block = $("#rec93517908");
// Class элемента, в котором будет находиться слайдер
var wrap = $(".tn-elem__935179081552539493720");
// Id блоков, которые будут слайдами
var slides = $("#rec93517909, #rec93517910, #rec93517911");
wrap.addClass("tildoshnaya-slider-owl");
var box = wrap.find(".tn-atom");
box.append('<div class="owl-carousel owl-theme"></div>');
slides.appendTo(block.find('.owl-carousel'));
var owl = wrap.find('.owl-carousel').owlCarousel({
// Зациклить слайдер - true
// Без зацикленности - false
loop:true,
// Точки-контроллы
dots: false,
nav:false,
// Колличество карточек
items: 1,
// Адаптивность
responsive:{
// 0 это минимальная ширина экрана, при которой включается следующая часть кода
// 0:{
// items: 1 это колличество слайдов на экране
// items:1
// },
0:{
items:1
},
640:{
items:1
},
960:{
items:1
},
}
// Адаптивность: конец
})
block.find("[href='#slider_left']").click(function(e){
e.preventDefault();
owl.trigger('prev.owl.carousel');
})
block.find("[href='#slider_right']").click(function(e){
e.preventDefault();
owl.trigger('next.owl.carousel');
})
});
</script>
<style>
/* tildoshnaya_ */
.tildoshnaya-slider-owl .t-rec .t396__artboard {
/* Указываем высоту слайда */
height: 300px !important;
/* Указываем ширину слайда */
width: 300px !important;
}
.tildoshnaya-slider-owl {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
}
.tildoshnaya-slider-owl .t-rec,
.tildoshnaya-slider-owl .t396__artboard {
overflow: hidden !important;
}
</style>
Есть вопросы?
Вот что есть еще
ЭФФЕКТ
Модификация позволяет анимировать числа в Zero Block с заданным начальным и конечным значением
Модификация
Запускаем анимацию для мобильных устройств простым кодом
