Как сделать слайдер с вкладками в Tilda Publishing. Переключение табов

Введение

Создание интерактивных элементов на веб-страницах является важным аспектом современного веб-дизайна. Одним из таких элементов является слайдер с вкладками в Tilda, который позволяет пользователю легко переключаться между различными разделами контента на одной странице.

Tilda Publishing — это одна из самых популярных платформ для создания веб-сайтов, которая предоставляет удобный интерфейс для создания сайтов без необходимости знания программирования. В этой статье мы рассмотрим процесс создания слайдера с вкладками на Tilda Publishing и предоставим шаг за шагом инструкцию по его созданию.

Ключевые слова: веб-дизайн, интерактивные элементы, слайдер с вкладками, Tilda Publishing, создание сайтов, программирование.

Слайдер с вкладками в Tilda. Элементы навигации

Итак, наш слайдер с вкладками в Tilda будет переключаться с помощью табов (вкладок) и при помощи отдельных переключателей. Таким образом вы получаете слайдер и навигацию с вкладками в одном флаконе. Чтобы созать и настроить элементы навигации следуйте нашей инструкции:

1. Создайте zero block.
2. Удалите стандартное наполнение блока.
3. Добавьте любые элементы, которые вы планируете использовать в качестве вкладок. В этом примере мы будем использовать кнопки.
4. Стилизуйте кнопку по вашему усмотрению.
5. Нажмите правой кнопкой мыши на вашу вкладку и выберите «Add css class name».
6. В соответствующем поле введите «tabbtn1».
7. Продублируйте кнопку столько раз, сколько планируется вкладок на вашей странице.
8. Добавьте в zero block элементы переключения слайдов (стрелки).
9. Кликните на первый переключатель правой кнопкой мыши, выберите «Add css class name» и пропишите «tab1prev».
10. Кликните на второй переключатель правой кнопкой мыши, выберите «Add css class name» и пропишите «tab1next».
11. Нажмите на кнопку «+» и выберите «Add HTML».
12. Откройте html элемент и скопируйте в него следующий код:

<style>
    .tabbtn1 {
        cursor: pointer;
    }
    .v-activebtn1 {
         border-bottom: 2px solid #000;
        
    }
    .hidetab {
        display: none !important;
    }
    
</style>

Это стили для активной вкладки. Сохраните изменения и выйдите из zero блока.

Слайдер с вкладками в Tilda. Создание слайдов из блоков

В качестве слайдов или содержания вкладок мы можем использовать как стандартные блоки, так и зеро блоки. Давайте сначала выберем зеро блоки.

1. После зеро блока с элементами навигации создайте несколько отдельных зеро блоков и наполните их контентом по желанию.
2. После отдельных зеро блоков (слайдов) создайте html блок «T123».
3. Нажмите на кнопку «Контент» и скопируйте в него следующий код:

<script>
  var blocks1 = ["#rec570152372","#rec570152417","#rec570152426"];
 var buttons1 = document.querySelectorAll('.tabbtn1');
  for (var i=0; i < buttons1.length; i++) {
      buttons1[i].setAttribute('num', [i])
      buttons1[i].setAttribute('onclick', 'show1(this)')
     function show1(e) {
          blocks1.forEach(element => {
          $(element).addClass('hidetab')
          })
          buttons1.forEach(element => {
              $(element).removeClass('v-activebtn1')
          })
          $(e).addClass('v-activebtn1')
          $($(blocks1[e.attributes.num.value])).removeClass('hidetab')
      t_lazyload_update()
      }
  }
  $(document).ready(function() {setTimeout(() =>{
  $('.tab1next').click(function() { if ($('.tabbtn1.v-activebtn1').nextAll('.tabbtn1:first')[0] !== undefined){ show1($('.tabbtn1.v-activebtn1').nextAll('.tabbtn1:first')[0]) } }); $('.tab1prev').click(function() { if ($('.tabbtn1.v-activebtn1').prevAll('.tabbtn1:first')[0] !== undefined){ show1($('.tabbtn1.v-activebtn1').prevAll('.tabbtn1:first')[0]) } });$('.tab1next').css('cursor','pointer');$('.tab1next').css('cursor','pointer');$('.tab1prev').css('cursor','pointer')
    blocks1.forEach(element => {
          $(element).addClass('hidetab')
        })
    $(blocks1[0]).removeClass('hidetab')
    $(buttons1[0]).addClass('v-activebtn1')
}, 500)})
</script>

Для того, чтобы слайдер заработал, необходимо скопировать ID всех zero block слайдов и вставить их в код в строку «var blocks1». Опубликуйте страницу и посмотрите на результат!

Слайдер с вкладками в Tilda. Как использовать два слайдера на одной странице

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

1. Продублируйте блок с элементами навигации и расположите его после блока «Т123», который относится к перовому слайдеру.
2. Зайдите в редактор нового блока с элементами навигации.
3. В классах всех элементов (табы, переключатели слайдов) пропишите вместо единицы цифру 2. (tabbtn2, tab2prev, tab2next и т.д.)
4. Откройте html элемент, удалите старые стили и скопируйте туда новые:

<style>
    .tabbtn2 {
        cursor: pointer;
    }
    .v-activebtn2 {
         border-bottom: 2px solid #000;
        
    }
    .hidetab {
        display: none !important;
    }
    
</style>

По аналогии с первым слайдером, добавьте стандартные блоки, еще один блок «Т123» и скопируйте в него вторую часть скрипта:

<script>
  var blocks2 = ["#rec570214350","#rec570214394","#rec570214441"];
  var buttons2 = document.querySelectorAll('.tabbtn2');
  for (var i=0; i < buttons2.length; i++) {
      buttons2[i].setAttribute('num', [i])
      buttons2[i].setAttribute('onclick', 'show2(this)')
     function show2(e) {
          blocks2.forEach(element => {
          $(element).addClass('hidetab')
          })
          buttons2.forEach(element => {
              $(element).removeClass('v-activebtn2')
          })
          $(e).addClass('v-activebtn2')
          $($(blocks2[e.attributes.num.value])).removeClass('hidetab')
      t_lazyload_update()
      }
  }
  $(document).ready(function() {setTimeout(() =>{
  $('.tab2next').click(function() { if ($('.tabbtn2.v-activebtn2').nextAll('.tabbtn2:first')[0] !== undefined){ show2($('.tabbtn2.v-activebtn2').nextAll('.tabbtn2:first')[0]) } }); $('.tab2prev').click(function() { if ($('.tabbtn2.v-activebtn2').prevAll('.tabbtn2:first')[0] !== undefined){ show2($('.tabbtn2.v-activebtn2').prevAll('.tabbtn2:first')[0]) } });$('.tab2next').css('cursor','pointer');$('.tab2next').css('cursor','pointer');$('.tab2prev').css('cursor','pointer')
    blocks2.forEach(element => {
          $(element).addClass('hidetab')
        })
    $(blocks2[0]).removeClass('hidetab')
    $(buttons2[0]).addClass('v-activebtn2')
}, 500)})
</script>

Замените все ID в строке «var blocks2» на ID ваших новых блоков. Сохраните изменения и опубликуйте страницу.

Заключение

Создание слайдера с вкладками на Tilda является простым способом добавления интерактивных элементов на ваш сайт. Надеемся, что данная статья дала вам полезные инструкции для его реализации.

Не забывайте, что важным аспектом в создании веб-сайтов является его удобство использования для пользователей. Использование слайдеров с вкладками может улучшить опыт пользователей и сделать ваш сайт более привлекательным и функциональным.

Мы надеемся, что вы сможете применить полученные знания и создадите слайдер с вкладками на вашем Тильда сайте.

Рекомендуем почитать нашу статью о том, как сделать горизонтальный скролл слайдер в Тильде. Или же посмотрите видео.

Важно!

Обязательно прочитайте инструкцию по установке модификации.
Она может отличаться от инструкции из видео!

В личном кабинете укажите сайты, для которых мы активируем все модификации.