如何在 owl-carousel 中响应式设置宽度?
How to set the width responsively in owl-carousel?
有没有办法根据.right
的宽度指定.owlCarousel({ responsive:{
?
我通过 jQuery UI Resizable 为 .left
实现可变宽度。
所以想根据.right
的宽度改变滑动元素的个数。
样本:
https://jsfiddle.net/3mt7ykcs/
HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="flex">
<div class="left">
<p>.left is variable width by jQuery UI Resizable</p>
</div>
<div class="right">
<p>I want to determine the number of slider elements according to the range of .right</p>
<div id="owl-example" class="owl-carousel">
</div>
</div>
</div>
CSS:
.flex {
display: flex;
}
.right, .left {
width: 50%;
background: orange;
margin: 10px;
position: relative;
}
JS:
$(document).ready(function() {
var img = '<div><img src="https://placehold.jp/150x150.png"></div>';
for (var i = 0; i < 10; i++) {
$("#owl-example").append(img);
}
$("#owl-example").owlCarousel({
loop : false,
margin : 10,
nav : false,
dots : false,
responsive :{ // I want to determine the number of slider elements according to the range of .right
0:{
items:1
},
350:{
items:2
},
600:{
items:5
},
}
});
});
$("#owl-example").owlCarousel({
loop : false,
margin : 10,
nav : false,
dots : false,
responsiveBaseElement:$(".right")[0],
responsive :{ // I want to determine the number of slider elements according to the range of .right
0:{
items:1
},
350:{
items:2
},
600:{
items:5
},
}
});
有没有办法根据.right
的宽度指定.owlCarousel({ responsive:{
?
我通过 jQuery UI Resizable 为 .left
实现可变宽度。
所以想根据.right
的宽度改变滑动元素的个数。
样本: https://jsfiddle.net/3mt7ykcs/
HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="flex">
<div class="left">
<p>.left is variable width by jQuery UI Resizable</p>
</div>
<div class="right">
<p>I want to determine the number of slider elements according to the range of .right</p>
<div id="owl-example" class="owl-carousel">
</div>
</div>
</div>
CSS:
.flex {
display: flex;
}
.right, .left {
width: 50%;
background: orange;
margin: 10px;
position: relative;
}
JS:
$(document).ready(function() {
var img = '<div><img src="https://placehold.jp/150x150.png"></div>';
for (var i = 0; i < 10; i++) {
$("#owl-example").append(img);
}
$("#owl-example").owlCarousel({
loop : false,
margin : 10,
nav : false,
dots : false,
responsive :{ // I want to determine the number of slider elements according to the range of .right
0:{
items:1
},
350:{
items:2
},
600:{
items:5
},
}
});
});
$("#owl-example").owlCarousel({
loop : false,
margin : 10,
nav : false,
dots : false,
responsiveBaseElement:$(".right")[0],
responsive :{ // I want to determine the number of slider elements according to the range of .right
0:{
items:1
},
350:{
items:2
},
600:{
items:5
},
}
});