owl carousel - 为放置在同一页面上的多个滑块中的每一个设置不同的项目编号答案

【问题标题】：owl carousel - Set different items number for each of many sliders placed on the same pageowl carousel - 为放置在同一页面上的多个滑块中的每一个设置不同的项目编号
【发布时间】：2014-10-12 20:58:02
【问题描述】：

我有一个带有多个滑块的页面，这些滑块是使用 owl carousel 创建的。我想为每个滑块定义不同数量的可见项目。完美的解决方案是在 HTML 中定义可见项目的数量（作为类或数据）。我刚开始使用 jQuery，所以我只设法使用这样的数据属性传递一个值：

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

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

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

上面的代码不能正常工作，因为第一个滑块的值应用于页面上的所有滑块，我需要每个滑块都有不同数量的项目。我怎样才能做到这一点？

提前致谢

【问题讨论】：

如果你所有的轮播都有 .owl-carousel 类，那么你的代码 '$(".owl-carousel").owlCarousel( { items: slides });'将影响该类的所有轮播。
@Macsupport 我知道这一点，但我不知道如何使它正常工作。
对 jQuery 使用不同的类对 CSS 使用相同的类。我有大约 5 种不同的猫头鹰，它们的风格相同，但物品和其他功能的价值不同。这是如何做到这一点而不是编写更多的jQuery。
@Christina 你能这么好心并用一个例子发布答案吗？

标签： jquery owl-carousel

【解决方案1】：

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

itemDesktop - 适用于 1400 像素（默认）及以上的屏幕尺寸
itemsDesktopSmall- 屏幕尺寸 1100 像素（默认）及以上
itemsTablet- 屏幕尺寸为 700 像素（默认）及以上
itemsMobile- 屏幕尺寸为 500 像素（默认）及以上

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

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

【讨论】：

【解决方案2】：

Owl Carousel（版本 1——我没有在生产中使用 2）的 css 是 .owl-carousel 和 .owl-theme（由脚本添加）。由于我在所有滑块和其他滑块的特定样式之间共享样式，因此我使用 .owl-carousel 或仅使用类名，因为 .owl-controls 不被其他任何其他样式共享。如果 .owl-controls 对我的所有滑块都是 global ，我就可以设置它们的样式。如果您需要为不同的滑块设置不同的控件样式，您可以更具体地使用 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
}

【讨论】：

谢谢，这是我已经拥有的，但是当您阅读我的线程时，我需要从 HTML 传递幻灯片编号，这就是我卡住的地方。你有什么想法吗？

【解决方案3】：

我发现这是最好的解决方案希望它有所帮助，

$(".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,
      },
  }
  });

【讨论】：