我有一个包含多个使用owl轮播创建的滑块的页面。我想为每个滑块定义不同数量的可见项目。完美的解决方案是在HTML中定义可见项目的数量(作为类或数据)。我刚刚开始使用jQuery,所以我只设法使用数据属性传递一个值:
<div class="owl-carousel" data-itemsnumber="5">...</div>
然后我将此值应用于JS中的变量,并在设置中添加此变量,而不是像这样的项目编号。
var slides = $('.owl-carousel').data('itemsnumber');
$(".owl-carousel").owlCarousel(
{
items: slides
});
上面的代码无法正常工作,因为第一个滑块的值应用于页面上的所有滑块,我需要每个滑块都有不同数量的项目。我怎样才能做到这一点?
提前致谢
答案 0 :(得分:3)
owl-carousels中定义了一些预先定义的选项:
您可以使用上述选项设置根据屏幕宽度显示的项目数。一些像这样的东西:
$(".owl-carousel-product").owlCarousel({
items: 3,
itemsDesktop: [1400, 3],//1400:screen size, 3: number if items in the slide
itemsDesktopSmall: [1100, 2],
itemsTablet: [700, 1],
itemsMobile: [500, 1]
});
此外,如果您使用轮播进行图像处理,则图像可能会在不同的屏幕上重叠。这样你就可以在你的css文件中使图像的宽度达到100%。
答案 1 :(得分:2)
猫头鹰旋转木马的css(版本1 - 我还没有在生产中使用过2)是.owl-carousel和.owl-theme(由脚本添加)。由于我在所有滑块和其他滑块的特定样式之间共享样式,因此我使用.owl-carousel或只是类名,因为.owl-controls
不会被其他任何其他样式共享。如果它们是全局到我的所有滑块,我可以设置样式.owl-controls。如果您需要为不同的滑块设置不同的控件样式,那么您可以更加具体地使用CSS,例如.myfunky-slider .owl-controls {}
。
我在html 上使用.owl-carousel 我自己的类用于该滑块:
<div class="mini-multi owl-carousel">
...items go here ...
</div>
<div class="content-slider owl-carousel">
...items go here ...
</div>
<div class="full-width-slider owl-carousel">
...items go here ...
</div>
我使用jQuery通过我的班级名称来调用它们:
$(document).ready(function() {
$(".content-slider").owlCarousel({
...OPTIONS...
});
$(".full-width-slider").owlCarousel({
...OPTIONS THAT are different ...
});
$(".mini-multi").owlCarousel({
...OPTIONS that are different ...
items: 6,
itemsDesktop: [1400, 6],
itemsDesktopSmall: [1100, 4],
itemsTablet: [700, 3],
itemsMobile: [500, 2]
});
});
我根据共享或特定的类名称使用共享和特定样式设置样式:
/* ---- base shared styles ---- */
.owl-carousel {
...styles...
}
.owl-pagination .owl-page span {
...styles...
}
.owl-pagination {
...styles...
}
.owl-page {
...styles...
}
.owl-controls {
...styles...
}
.owl-pagination .owl-page.active span,
.owl-controls.clickable .owl-pagination .owl-page:hover span {
...styles...
}
/* --- assumes all sliders will have fluid images --- */
.owl-carousel .item img {
display: block;
width: 100%;
height: auto;
}
/* --- .mini-multi slider --- */
.mini-multi .item {
background:red;
}
/* --- .full-width-slider slider --- */
.full-width-slider .item {
border:5px solid green
}
答案 2 :(得分:0)
我发现这是最好的解决方案,希望对您有帮助,
$(".owl-class-name").owlCarousel({
loop: true,
margin: 0,
nav: true,
responsive : {
//breakpoint from 0 and up
0 : {
items : 1,
},
// add as many breakpoints as desired , breakpoint from 480 up
480 : {
items:1,
},
// breakpoint from 768 up
768 : {
items:2,
},
992 :{
items:3,
},
}
});