#36: Слайдер из zero блоков

ЭЛЕМЕНТЫ
LET'S GO!
Покажем, как сделать слайдер из зеро блоков

TEMPLATE ID: 12303197
Демонстрационная версия

Вы можете скопировать готовый шаблон и загрузить его на свой аккаунт, а потом следовать инструкции по редактированию страницы. Нажмите Создать новую страницу на своем аккаунте, прокрутите галерею с шаблонами почти до конца, до кнопки Указать ID шаблона. Нажмите ее и укажите TEMPLATE ID.
Замените контент на свой
В шаблоне вы увидите стандартный блок CR30N и 5 зеро блоков. 3 зеро блока являются отдельным слайдами, а оставшиеся 2 это копии первого и последнего слайдов.
Зеро блоки настроены, теперь перейдем к блокам с кодом T123:
1. Замените #rec205692745 на ID вашего слайдера CR30N,
2. Пропишите ID зеро блоков согласно комментариям в коде.
<script>
$(document).ready(function(){
    var sliderid = '#rec205692745 .t-slds__item';
    var slidercount = $(sliderid).length;
    // Пропишите ID 1, 2 и 3 зеро блоков, которые будут слайдами  
    var slider = ["#rec205692748", "#rec209722544", "#rec209722729"];                
    $(sliderid).empty(); var i = 0; while (i < slidercount-2){
    $(slider[i]).appendTo(sliderid+":eq("+(i+1)+")");i++;};
    // Пропишите ID копии первого зеро блока
    $('#rec209722473').appendTo(sliderid+":eq("+(slidercount-1)+")");
    // Пропишите ID копии последнего зеро блока
    $('#rec209722786').appendTo(sliderid+":eq(0)");
});    
</script>
<style>
#rec205692745 .t-slds__arrow_body{
display:none;
}
</style>

<script>
$(document).ready(function(){
    $('a[href="#left"]').click(function(e){e.preventDefault();
    $("#rec205692745 .t-slds__arrow_body-left").click();});
});
</script>

<script>
$(document).ready(function(){
    $('a[href="#right"]').click(function(e){e.preventDefault();
    $("#rec205692745 .t-slds__arrow_body-right").click();});
});
</script>
Опубликуйте страницу после внесения всех изменений, чтобы увидеть, что получилось.
Вопрос-ответ
👋
Есть вопрос и вы не нашли на него ответ? Задайте его в комментариях.
Как узнать ID блока?
Перейдите в Настройки блока, прокрутите их до конца — и вы увидите ID блока вида Block id: #rec000000000
Как заменить шрифты в зеро-блоках
При первом редактировании Тильда предложит вам заменить все шрифты в редактируемом блоке на установленные вами в настройках сайта. Нажмите Replace all, чтобы заменить их.
Начертания отображаются некорректно — вместо Normal вижу Light
Измените эти значения в Настройках сайта. Настройки сайта Шрифты и цвета Размер и насыщенность — Normal, 18 px, Bold
Если со шрифтами что-то пошло не так
Вы можете установить нужный шрифт каждого элемента вручную. Выделите нужный элемент и найдите в меню Settings настройку шрифта Typeface.
comments powered by HyperComments