<!-- AnKu Zero block slider with Owl carousel plugin-->
<!--
Подключаем плагин
Советую использовать только на тех страницах,
где предполагается карусель, чтобы не грузить
лишние скрипты и стили на остальных страницах.
-->
<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>
<!-- Скрипт для размещения карусели в области shape -->
<script>
$(document).ready(function() {
var block = $('#rec250132109'); // id Zero block
var wrap = $('.anku-slider'); // область карусели
//- этот класс добавляем к шейпу, если на странице планируется 2 карусели,
//то класс второй должен отличаться, чтобы не заморачиваться,
//добавьте порядковое число к классай, не делая пробела
var slides = $('#rec250132944, #rec250144462, #rec250147612, #rec250148337, #rec250149559'); // id Zero block слайдов
var box = wrap.find('.tn-atom');
box.append('<div class="owl-carousel owl-theme"></div>');
slides.appendTo(block.find('.owl-carousel'));
var owl = wrap.find('.owl-carousel').owlCarousel({
// настройки карусели, больше на официальном сайте плагина, их более 60шт., я добавил стоковые.
// просто берете настройки из документации и добавляете в этот список, соблюдайте синтаксис, иначе перестанет работать.
loop: true, // true/false - бесконечная прокрутка
center: false, // true/false - центрирование
dots: false, // true/false - точки под слайдами
nav: false, // true/false - стандартная навигация
margin: 10, // any value in px - внешний отступ сежду слайдами в пикселях
items: 4, // кол-во слайдов
responsive: { // количиство отображаемых слайдов в зависимости от разрешения дисплея
0: {
items: 1
},
640: {
items: 1
},
1000: {
items: 1
},
}
})
block.find("[href='#anku_left']").click(function(e) { // добавьте эту ссылку к кнопке, отвечающей за прокрутку влево (назад)
e.preventDefault();
owl.trigger('prev.owl.carousel');
})
block.find("[href='#anku_right']").click(function(e) { // добавьте эту ссылку к кнопке, отвечающей за прокрутку вправо (вперед)
e.preventDefault();
owl.trigger('next.owl.carousel');
})
});
</script>
<style>
/* Добавьте высоту слайдов на разных разрешениях дисплея */
/* xl */
.anku-slider .t-rec .t396__artboard {
width: 100% !important;
height: 350px !important;
word-break: normal !important;
background: transparent !important;
}
/* lg */
@media screen and (max-width: 1199px) {
.anku-slider .t-rec .t396__artboard {
height: 310px !important;
}
}
/* md */
@media screen and (max-width: 959px) {
.anku-slider .t-rec .t396__artboard {
height: 310px !important;
}
}
/* sm */
@media screen and (max-width: 639px) {
.anku-slider .t-rec .t396__artboard {
height: 350px !important;
}
}
/*
@media screen and (max-width: 479px) {
.anku-slider .t-rec .t396__artboard {
height: 350px !important;
}
}
*/
.anku-slider {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
}
.anku-slider .t-rec,
.anku-slider .t396__artboard {
overflow: hidden !important;
}
/* hide filters */
.anku-slider .t-rec .t396__artboard>.t396__carrier,
.anku-slider .t-rec .t396__artboard>.t396__filter {
display: none !important;
}
</style>