猫头鹰轮播-为放置在同一页面上的多个滑块中的每个滑块设置不同的项目编号 [英] owl carousel - Set different items number for each of many sliders placed on the same page

问题描述

我有一个页面，其中包含多个由owl carousel创建的滑块.我想为每个滑块定义不同数量的可见项.完美的解决方案是定义HTML中可见项目的数量(作为类或数据).我只是开始使用jQuery，所以我只设法使用data属性传递了一个值，如下所示:

I have a page with multiple sliders that are created with owl carousel. I would like to define different number of visible items for each slider. The perfect solution would be to define number of visible items in HTML (as a class or data). I am just starting using jQuery so I only managed to pass a value using data attribute like this:

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

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

Then I applied this value to a variable in JS and add this variable in settings instead of items number like this.

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

上述代码无法正常使用，因为第一个滑块的值已应用于页面上的所有滑块，因此我需要每个滑块都具有不同数量的项目.我该如何实现?

The above code is not working properly as value from first slider is applied to all sliders on page, and I need each of them to have different number of items. How can I achieve this?

预先感谢

推荐答案

在猫头鹰轮播中定义了一些预定义的选项:

There are some pre-defined options defined in owl-carousels:

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

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

You could use the above options to set how many items would be shown according to the screen width. some what like this:

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

Also if you are using the carousels for images, then images might overlap at different screens. so you could make the width of images 100% in your css file.

这篇关于猫头鹰轮播-为放置在同一页面上的多个滑块中的每个滑块设置不同的项目编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！