<!-- Подключаем плагин слайдера -->
<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>