Код слайдера для тильда

<!-- Подключаем плагин слайдера -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Определяем слайды и создаем первый слайдер "входные двери" внутри шейпа с классом entrance-door -->
<script>
  var slides = $('#rec369501439, #rec369507710, #rec369507726, #rec369507730, #rec369507733, #rec369507769, #rec369507776, #rec369507791'); //id zero блоков слайдов
  var wrapper = '.entrance-door'; //класс шейпа - область слайдера, присвой шейпу класс entrance-door
  var box = $('.entrance-door .tn-atom').addClass('swiper-wrapper');
  $(wrapper).addClass('swiper-container');
  $(slides).addClass('swiper-slide').appendTo(box);
</script>

<!-- Скрипт настройки первого слайдера -->
<script>
  var swiper = new Swiper(".entrance-door", {
    loop: true, // бесконечная прокрутка
    navigation: {
      nextEl: ".s-next", //добавь шейп, загрузи картинку стрелки фоном, присвой класс s-next
      prevEl: ".s-prev", //добавь шейп, загрузи картинку стрелки фоном, присвой класс s-prev
    },
    pagination: {
      el: ".swiper-pagination", //добавь шейп во всю ширину и высотой 20px, присвой класс swiper-pagination, в нем появятся точки
      clickable: true,
    },
    breakpoints: {
      0: { //разрешение дисплея, при котором сработает настройка
        slidesPerView: 1, //кол-во слайдов на экране
        spaceBetween: 20, //отступ между слайдами
        slidesPerGroup: 1, //кол-во слайдов, которое прокрутится за 1 слайд

      },
      480: { //разрешение дисплея, при котором сработает настройка
        slidesPerView: 2, //кол-во слайдов на экране
        spaceBetween: 20, //отступ между слайдами
        slidesPerGroup: 2, //кол-во слайдов, которое прокрутится за 1 слайд
      },
      640: { //разрешение дисплея, при котором сработает настройка
        slidesPerView: 3, //кол-во слайдов на экране
        spaceBetween: 20, //отступ между слайдами
        slidesPerGroup: 3, //кол-во слайдов, которое прокрутится за 1 слайд
      },
      960: { //разрешение дисплея, при котором сработает настройка
        slidesPerView: 5, //кол-во слайдов на экране
        spaceBetween: 20, //отступ между слайдами
        slidesPerGroup: 5,
      },
      1200: { //разрешение дисплея, при котором сработает настройка
        slidesPerView: 6, //кол-во слайдов на экране
        spaceBetween: 40, //отступ между слайдами
        slidesPerGroup: 6, //кол-во слайдов, которое прокрутится за 1 слайд
      }
    }
  });
</script>


<!-- Определяем слайды и создаем второй слайдер "межкомнатные двери" внутри шейпа с классом interior-door -->
<script>
  var slides = $('#rec369757727, #rec369757728, #rec369757729, #rec369757730, #rec369757731, #rec369757732, #rec369757734, #rec369757735'); //id zero блоков слайдов
  var wrapper = '.interior-door'; //класс шейпа - область слайдера, присвой шейпу класс interior-door
  var box = $('.interior-door .tn-atom').addClass('swiper-wrapper');
  $(wrapper).addClass('swiper-container');
  $(slides).addClass('swiper-slide').appendTo(box);
</script>

<!-- Скрипт настройки второго слайдера -->
<script>
  var swiper = new Swiper(".interior-door", {
    loop: true, // бесконечная прокрутка
    navigation: {
      nextEl: ".i-next", //добавь шейп, загрузи картинку стрелки фоном, присвой класс i-next
      prevEl: ".i-prev", //добавь шейп, загрузи картинку стрелки фоном, присвой класс i-prev
    },
    pagination: {
      el: ".i-swiper-pagination", //добавь шейп во всю ширину и высотой 20px, присвой класс i-swiper-pagination, в нем появятся точки
      clickable: true,
    },
    breakpoints: {
      0: { //разрешение дисплея, при котором сработает настройка
        slidesPerView: 1, //кол-во слайдов на экране
        spaceBetween: 20, //отступ между слайдами
        slidesPerGroup: 1, //кол-во слайдов, которое прокрутится за 1 слайд

      },
      480: { //разрешение дисплея, при котором сработает настройка
        slidesPerView: 2, //кол-во слайдов на экране
        spaceBetween: 20, //отступ между слайдами
        slidesPerGroup: 2, //кол-во слайдов, которое прокрутится за 1 слайд
      },
      640: { //разрешение дисплея, при котором сработает настройка
        slidesPerView: 3, //кол-во слайдов на экране
        spaceBetween: 20, //отступ между слайдами
        slidesPerGroup: 3, //кол-во слайдов, которое прокрутится за 1 слайд
      },
      960: { //разрешение дисплея, при котором сработает настройка
        slidesPerView: 5, //кол-во слайдов на экране
        spaceBetween: 20, //отступ между слайдами
        slidesPerGroup: 5,
      },
      1200: { //разрешение дисплея, при котором сработает настройка
        slidesPerView: 6, //кол-во слайдов на экране
        spaceBetween: 40, //отступ между слайдами
        slidesPerGroup: 6, //кол-во слайдов, которое прокрутится за 1 слайд
      }
    }
  });
</script>


<!-- Обновляем отложенную загрузку изображений -->
<script>
  //при смене слайда
  swiper.on('slideChange', function() {
    setTimeout(function() {
      t_lazyload_update()
    }, 100);
  });
  //при клике на кнопки пагинации слайдера
  $('.swiper-pagination-bullet, .s-next, .s-prev').on('click', function() {
    setTimeout(function() {
      t_lazyload_update()
    }, 100);
  });
</script>

<!-- Стили оформления элементов слайдера -->
<style>
  /*Переменные css*/
  :root {
    --circule-h: 14px;
    /* Высота точки пагинации */
    --circule-w: 14px;
    /* Ширина точки пагинации */
    --circule-gap: 5px;
    /* Отступ между точками пагинации */
    --circule-bg: #00000080;
    /* точки пагинации */
    --circule-bg-active: #50d372;
    /* Цвет активной точки пагинации */
  }

  /*Убираем outline при клике на стреку смены слайда и добавляем свойство курсора*/
  .s-next,
  .s-prev,
  .i-next,
  .i-prev {
    outline: none !important;
    cursor: pointer;
  }

  /*Позиционируем точки пагинации внутри шейпа*/
  .swiper-pagination,
  .i-swiper-pagination {
    display: flex;
    justify-content: center;
    gap: var(--circule-gap);
  }

  /*Визуальное оформление точек пагинации (параметры размера и цвета меняются в переменных выше)*/
  .swiper-pagination-clickable .swiper-pagination-bullet {
    height: var(--circule-h);
    width: var(--circule-w);
    background: var(--circule-bg);
    opacity: 1 !important;
    outline: none !important;
  }

  /*Визуальное оформление активной точки пагинации*/
  .swiper-pagination-bullet-active {
    background: var(--circule-bg-active) !important;
  }

  /*Позиционирование контейнера слайдера, для корректного отображения в Tilda*/
  .swiper-container {
    position: absolute;
    display: block;
    margin: 0 !important;
    overflow: hidden;
  }

  .swiper-wrapper {
    display: flex !important;
  }

  /*Визуальное оформления кнопки, которая появляется при наведении мыши на слайд*/
  .h-btn {
    opacity: 0;
    transition: all .3s;
  }

  .h-btn.hovered {
    opacity: 1 !important;
  }
</style>

<!-- Функция, которая проявляет кнопку при наведении курсора мыши на слайд -->
<script>
  $('.swiper-slide').hover(function() {
    $(this).find('.h-btn').addClass('hovered');
  }, function() {
    $('.h-btn').removeClass('hovered');
  });
</script>