5 / 0 / 0
Регистрация: 04.12.2018
Сообщений: 48
|
|
|
1
|
Неправильно работает слайдер owl-carousel, в чем причина?
04.12.2020, 23:23. Показов 1800. Ответов 0
При пролистывании слайды не прячутся (не исчезают). Должно быть видно только 4 слайда, а сейчас их больше и выходят за стрелку. Что может быть не так? Делаю на Тильде.
| PHP/HTML | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
| <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>
(function () {
// Id блока, в котором будет слайдер
let block = $("#rec256866171");
// Class элемента, в котором будет находиться слайдер
let wrap = $(".tn-elem__2568661711607104509728");
// Id блоков, которые будут слайдами
let slides = $("#rec257736238, #rec257737297, #rec257737450, #rec257737583");
wrap.addClass("tildoshnaya-slider-owl");
let box = wrap.find(".tn-atom");
box.append('<div class="owl-carousel owl-theme"></div>');
slides.appendTo(block.find('.owl-carousel'));
let owl = wrap.find('.owl-carousel').owlCarousel({
// Зациклить слайдер - true
// Без зацикленности - false
loop:true,
nav:false,
dots: false,
// Колличество карточек
items: 4,
// Адаптивность
responsive:{
// 0 это минимальная ширина экрана, при которой включается следующая часть кода
// 0:{
// items: 1 это колличество слайдов на экране
// items:1
// },
0:{
items:1
},
640:{
items:2
},
960:{
items:4
},
}
// Адаптивность: конец
})
block.find("[href='#slider_left']").click(function(){
owl.trigger('prev.owl.carousel');
})
block.find("[href='#slider_right']").click(function(){
owl.trigger('next.owl.carousel');
})
}());
</script>
<style>
/* tildoshnaya_ */
.tildoshnaya-slider-owl .t-rec .t396__artboard {
/* Указываем высоту слайда */
height: 234px !important;
/* Указываем ширину слайда */
width: 953px !important;
}
/* Круги (слайды)*/
#rec257736238 > div > div > img {
width: 192px;
height: 192px;
}
#rec257737297 > div > div > img {
width: 192px;
height: 192px;
}
#rec257737450 > div > div > img {
width: 192px;
height: 192px;
}
#rec257737583 > div > div > img {
width: 192px;
height: 192px;
}
</style> |
|
0
|
(
