Пример работы

Слайдер на весь экран

Модификатор для размещения слайдера с необычным пролистыванием на весь экран
Слайдер на весь экран
1. В Zero блоке добавляем html-элемент (он нужен для добавления эффекта со шторкой), задаем ему позиционирование Windows (Left-Top) и размеры ширины и высоты по 100%. Далее копируем в него код
Скопировать код
Скопировать код
2. Поверх html-элемента добавляем шейп, делаем его прозрачным и задаем ему класс .tistols_fs (этот шейп будет служить контейнером для слайдов, поэтому его размеры, в том числе на адаптациях, необходимо будет настроить после создания слайдов)

3. Добавляем кнопки или шейпы со стрелками. Стрелкам задаем классы .left и .right

4. Создаем Zero блок для первого слайда и настраиваем:
4.1. Задаем класс блоку .uc-fs_slide
4.2. Добавляем необходимые элементы в блок
Задаем им настройки:
Container: Window Container
Выравнивание: Left & Top

5. Адаптируем первый слайд и делаем нужное количество копий, для других слайдов.
Заменяем контент слайдов и проверяем, чтобы у всех блоков сохранился одинаковый класс .uc-fs_slide

6. Добавляем блок T123 и вставляем в него код.
7. В коде настраиваем ссылки на изображения и указываем количество слайдов.

<!--SL08 - Модификация для Тильды. Слайдер на весь экран https://mod.tistols.com/slider-fill -->
<div class="cover" style="width:100%;height:100%;display: flex;pointer-events:none;"></div>
<style>
    .tistols_bg {
        position:absolute;
        visibility:hidden;
        background-position:center;
    }
    .tistols_bg.active {
        visibility:visible;
    }
    .tistols_column {
        position:relative;
    }
    .tistols_column:after {
        content:'';
        width:0;
        height:100%;
        background:#F8F5F1;
        position:absolute;
        top:0;
        left:0;
        transition:width 0.3s ease;
    }
    .tistols_column.active:after {
        transition:width 0.3s ease;
        width:100%;
    }
    
</style>

<!--SL08 - Модификация для Тильды. Слайдер на весь экран https://mod.tistols.com/slider-fill -->
<style>
  /* Добавьте высоту слайдов на разных разрешениях дисплея */

  /* xl */
  .tistols_fs .t-rec .t396__artboard {
    width: 100% !important;
    height: 550px !important;
    word-break: normal !important;
    background: transparent !important;
  }

  /* lg */
  @media screen and (max-width: 1199px) {
    .tistols_fs .t-rec .t396__artboard {
      height: 550px !important;
    }
  }

  /* md */
  @media screen and (max-width: 959px) {
    .tistols_fs .t-rec .t396__artboard {
      height: 100% !important;
    }
  }

  /* sm */
  @media screen and (max-width: 639px) {
    .tistols_fs .t-rec .t396__artboard {
      height: 100% !important;
    }
  }
  
  @media screen and (max-width: 479px) {
    .tistols_fs .t-rec .t396__artboard {
      height: 100% !important;
    }
  }

  .tistols_fs {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
  }

  .tistols_fs .t-rec,
  .tistols_fs .t396__artboard {
    overflow: hidden !important;
  }

  /* hide filters */
  .tistols_fs .t-rec .t396__artboard>.t396__carrier,
  .tistols_fs .t-rec .t396__artboard>.t396__filter {
    display: none !important;
  }
  .left, .right {
      cursor: pointer;
  }
  .tistols_fs .owl-carousel .owl-stage-outer {
      overflow: visible;
  }
  .tistols_fs .owl-item:not(.active) .tn-elem:not(.trigger) {
      opacity: 0
  }
  .tistols_fs .owl-item:not(.active) .trigger {
      left:15%!important;
      opacity: 1;
  }
  .tistols_fs .owl-item:not(.active) .trigger.prev {
      left:70%!important;
      opacity: 1;
  }
  .tistols_fs .owl-item:not(.active) .trigger .tn-atom {
    color: transparent!important;
    -webkit-text-stroke: 1px #C4AD8A;
  }
  .tistols_fs .owl-item:not(.active) .trigger .tn-atom:hover {
    color: #C4AD8A!important;
    -webkit-text-stroke: 1px #C4AD8A;
    cursor:pointer;
  }
</style>


<!--SL08 - Модификация для Тильды. Слайдер на весь экран https://mod.tistols.com/slider-fill -->
<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() {

    var bgImages = [
      'https://static.tildacdn.com/tild3232-6662-4866-b435-386336646532/pexels-ekaterina-bol.jpg',
      'https://static.tildacdn.com/tild3233-3161-4335-b036-363331383266/pexels-ekaterina-bol.jpg',
      'https://static.tildacdn.com/tild3632-3436-4362-b663-663666646130/pexels-ekaterina-bol.jpg',
      'https://static.tildacdn.com/tild6139-6438-4535-a561-316364623964/pexels-ekaterina-bol.jpg'
    ];

    var shape = 4; //количество шторок
    
    var percentWidth = 100 / shape;
    

    var block = $('.uc-tistols_fs'); 
    var wrap = $('.tistols_fs');
    var slides = $('.uc-fs_slide'); 
    var box = wrap.find('.tn-atom');
    var totalSlides = slides.length;

    box.append('<div class="owl-carousel owl-theme"></div>');
    slides.appendTo(block.find('.owl-carousel'));
    
    var cover = $('.cover');
    cover.empty();
    for (var i = 0; i < totalSlides; i++) {
      var activeClass = i === 0 ? 'active' : '';
      cover.append('<div class="tistols_bg ' + activeClass + '" style="width:100%;height:100%;background-size:cover;background-image:url(' + bgImages[i] + ')"></div>');
    }
    
    for (var j = 0; j < shape; j++) {
      cover.append(`<div class="tistols_column" style="width:${percentWidth}%;border-left:0px solid #111111;height:100%;transition-delay:'${(1 + j * 0.2)}s;"></div>`);
    }
    
    var style = $('<style>');
    for (var k = shape; k < shape; k++) {
      var delay = k * 0.1;
      style.append(`
        .tistols_column:nth-child(${k}):after {
          transition-delay:${delay}s;
        }
      `);
    }
    $('head').append(style);

    var owl = wrap.find('.owl-carousel').owlCarousel({
      loop: false,
      center: false,
      dots: false,
      nav: false,
      margin: 0,
      items: 4,
      mouseDrag: false,
      touchDrag: false,
      smartSpeed: 750,
      responsive: {
        0: { items: 1 },
        640: { items: 1 },
        1000: { items: 1 },
      }
    });

    var currentSlideIndex = 0;

    function updateControls() {
      $('.tistols_bg').removeClass('active');
      $('.tistols_bg:eq(' + currentSlideIndex + ')').addClass('active');

      if (currentSlideIndex === 0) {
        $('.left').hide();
      } else {
        $('.left').show();
      }

      if (currentSlideIndex === totalSlides - 1) {
        $('.right').hide();
      } else {
        $('.right').show();
      }

      $('.trigger').removeClass('prev active');
      $('.trigger:eq(' + currentSlideIndex + ')').addClass('active');

      if (currentSlideIndex > 0) {
        $('.trigger:eq(' + (currentSlideIndex - 1) + ')').addClass('prev');
      }
    }

    $('.owl-carousel').on('changed.owl.carousel', function(event) {
      currentSlideIndex = event.item.index;
      updateControls();
    });

    block.find(".left").click(function(e) {
      e.preventDefault();
      $('.tistols_column').addClass('active');
      setTimeout(function() {
        owl.trigger('prev.owl.carousel');
        setTimeout(function() {
          $('.tistols_column').removeClass('active');
        }, 500);
      }, 1000);
    });

    block.find(".right").click(function(e) {
      e.preventDefault();
      $('.tistols_column').addClass('active');
      setTimeout(function() {
        owl.trigger('next.owl.carousel');
        setTimeout(function() {
          $('.tistols_column').removeClass('active');
        }, 500);
      }, 1000);
    });

    $('.trigger .tn-atom').click(function() {
      var content = parseInt($(this).text(), 10) - 1;
      if (content > currentSlideIndex) {
        for (var i = currentSlideIndex; i < content; i++) {
          $('.right').click();
        }
      } else if (content < currentSlideIndex) {
        for (var j = currentSlideIndex; j > content; j--) {
          $('.left').click();
        }
      }
    });

    $('.tistols_bg:eq(0)').addClass('active');
    $('.left').hide();
    updateControls();
  });
</script>

Добавьте шаблон страницы к себе в проект.
  1. Нажмите на кнопку "Создать новую страницу"
  2. Пролистайте до конца
  3. В "Указать ID страницы" напишите номер 51873589
Вам также может быть интересно:
  • Слайдер из двух шейпов в zero
  • Гибкий слайдер
  • 3D-карусель
*Модификации будут работать в проектах после истечения подписки
Pro
  • Полный доступ к коду всех модификаций

  • Обновления библиотеки (от 5 модификаций в месяц)

  • Поддержка работы модификаций при изменениях в Tilda

  • Пошаговые видеоинструкции

  • Готовые шаблоны с модификациями

  • Оповещения о новых модификациях

  • Техподдержка в чате

  • -30% скидка на модуль smsmod.ru
250 руб.
/ месяц
НОВЫЙ
Club
  • Все преимущества тарифа Pro

  • Модуль smsmod.ru для 1 сайта на 1 год

  • Сертификат на разработку 1 модификации

  • Доступ в клубный чат, в котором:

  • Помогаем с доработкой модификаций под ваш проект

  • Общаемся и делимся опытом, рекомендациями
1 500 руб.
/ месяц
Free
  • Доступ к коду бесплатных модификаций

  • Пошаговые видеоинструкции

  • Готовые шаблоны с  бесплатными модификациями

  • Обновления библиотеки (1−3 модификации в месяц)

  • Оповещения о новых модификациях
Бесплатный тариф
Тарифы
Чтобы получить доступ, выберите тариф:
При оплате на год, вы:
экономите 3 000 ₽
-50%
При оплате на год, вы:
экономите 12 000 ₽
-40%
Месяц
Год
Месяц
Год
*Модификации будут работать в проектах после истечения подписки
Pro
  • Полный доступ к коду всех модификаций

  • Обновления библиотеки (от 5 модификаций в месяц)

  • Поддержка работы модификаций при изменениях в Tilda

  • Пошаговые видеоинструкции

  • Готовые шаблоны с модификациями

  • Оповещения о новых модификациях

  • Техподдержка в чате

  • -30% скидка на модуль smsmod.ru
500 руб.
/ месяц
НОВЫЙ
Club
  • Все преимущества тарифа Pro

  • Модуль smsmod.ru для 1 сайта на 1 месяц

  • Сертификат на разработку 1 модификации

  • Доступ в клубный чат, в котором:

  • Помогаем с доработкой модификаций под ваш проект

  • Общаемся и делимся опытом, рекомендациями
2 500 руб.
/ месяц
Free
  • Доступ к коду бесплатных модификаций

  • Пошаговые видеоинструкции

  • Готовые шаблоны с  бесплатными модификациями

  • Обновления библиотеки (1−3 модификации в месяц)

  • Оповещения о новых модификациях
Бесплатный тариф
Тарифы
Чтобы получить доступ, выберите тариф:
Месяц
Год
Месяц
Год