[Урок 45] Делаем слайдер из страниц

Всем большой привет. Урок по вопросу от подписчика. Работа со слайдером в тильде пока что немного ограничена, поэтому нет возможности сделать слайдер из нескольких страниц стандартными методами.

Но всегда можно найти решение проблемы через сторонний код. Этим мы и займёмся. Сохраняйте урок, уверен, что пригодится!

Добавляем нужные блоки.

Для начала нужно добавить несколько блоков. Список таков:

Блок слайдера
Три Zero блока с содержимым (я накидал для примера страницы с кейсами)
Две копии этих страниц - первой и последней
Блок вставки HTML кода

Сначала добавляем слайдер - блок CR30N из раздела галереи. Выглядит он вот так:

Его мы ставим на первое место и не трогаем.

Далее добавляем 3 нулевых блока и заполняем что-нибудь в них для наглядности.

Высота блоков 100%! Учтите.

Теперь просто делаем копию первого и последнего Zero блока.

Всё вместе выглядит как-то так:

Подготовительные работы выполнены. У нас есть слайдер, 5 Zero блоков и блок Т123 - Вставка HTML кода (его кстати ставим в самом конце)

Работаем с кодом.

В блоке T123 открываем настройки контента и вставляем код, как показано на скриншоте.

Вот сам код:

style>.t734 { height: auto !important; }</style>
<script>
$(document).ready(function(){
 var sliderID = '#id_блока_слайдера .t-slds__item';
 var slidercount = $(sliderID).length;
      var zeroSlideFull = [  "#id_блока1" ,  "#id_блока2" ,   "#id_блока3" ];                
   $(sliderID).empty(); var i = 0;     while (i < slidercount-2) {
    $(zeroSlideFull[i]).appendTo(sliderID+":eq("+(i+1)+")");i++;   };
  $('#id_копии_первого_зероблока').appendTo(sliderID+":eq("+(slidercount-1)+")");
  $('#id_копии_второго_зероблока').appendTo(sliderID+":eq(0)");
});    
</script>

Копируем его прямо от сюда и вставляем туда. Теперь нам нужно ввести id блоков на свои места.

Где взять id блока?

Открываем настройки любого блока, листаем в самый низ.

В нашем случае #rec197515655 это и есть айди, которое нам нужно забрать.

1) Берём id блока слайдера и вставляем на это место:

2) Берём id всех блоков Zero (1,2 и 3 экраны) и вставляем их сюда:

3) Берём id копий зеро блоков (блоки копии 1 и 3 экрана) и вставляем их сюда:

Таким образом получается, что мы задействовали все блоки в этом коде. Я делал пометки вроде "#id_блока1" - сами айди мы вставляем именно на этим места.

Уже со вставленными айди код выглядит вот так:

Сохраняем, закрываем и публикуем.
Слайдер со страницами готов!

Фото для урока взяты с фотостока pexels, код взят с сайта mo-tilda.