jquery - Owl Carousel - 为同一页面上放置的多个 slider 中的每个 slider 设置不同的项目编号

Question

我有一个页面，其中包含使用 Owl Carousel 创建的多个 slider 。我想为每个 slider 定义不同数量的可见项目。完美的解决方案是在 HTML 中定义可见项的数量(作为类或数据)。我刚刚开始使用 jQuery，所以我只能使用数据属性来传递一个值，如下所示:

<div class="owl-carousel" data-itemsnumber="5">...</div>

然后我将此值应用于 JS 中的变量，并在设置中添加此变量，而不是像这样的项目编号。

var slides = $('.owl-carousel').data('itemsnumber');
$(".owl-carousel").owlCarousel(
{
  items: slides
});

上面的代码无法正常工作，因为第一个 slider 的值应用于页面上的所有 slider ，并且我需要每个 slider 都有不同数量的项目。我怎样才能实现这个目标？

提前致谢

Answer 1

owl-carousels 中定义了一些预定义选项:

• itemDesktop - 适用于屏幕尺寸 1400px(默认)及以上
• itemsDesktopSmall- 适用于屏幕尺寸 1100px(默认)及以上
• itemsTablet - 屏幕尺寸为 700 像素(默认)及以上
• itemsMobile- 适用于屏幕尺寸 500px(默认)及以上

您可以使用上述选项来设置根据屏幕宽度显示多少个项目。一些像这样的:

 $(".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%。