Owl Carousel - 多个滑块不同的控件

Question

我正在考虑在多个地方实现滑块，并且需要单独控制每个滑块，在单个页面上进行两次控制，然后在网站的其他地方进行控制，所以理想情况下我希望他们这样做：

• 一次移动 1 张幻灯片
• 一次移动 3 张幻灯片
• 自动滚动

我可以看到如何在参数中对它们进行排序，但我不确定如何将它们分开，因此我可以单独控制它们。

我想我需要在 html 中添加不同的类，然后使用 .js 中的类来识别。

如何向 .js 添加类？

我假设它在这里：

  f.fn.owlCarousel.options = {
    items: 5,
    itemsCustom: !1,
    itemsDesktop: [1199, 4],
    itemsDesktopSmall: [979, 3],
    itemsTablet: [768, 2],
    itemsTabletSmall: !1,

我在这里读过这篇文章：

owl carousel - Set different items number for each of many sliders placed on the same page

但我不确定如何在 owl.carousel.min.js 文件中实现这一点，因为结构略有不同，或者如何/在何处添加类。

参见：f.fn.owlCarousel.options = {

提前致谢

邓肯

Answer 1

您可以实现多个地方，但您不想添加任何类。只需添加一个不同的 ID，您就可以像这样使用它：

$("#owl-demo1").owlCarousel({
    items: 3,
    itemsDesktop: [1199,3],
    itemsDesktopSmall: [979,3],
    itemsMobile: [479,3],
});
$("#owl-demo2").owlCarousel({
    items: 5,
    itemsDesktop: [1199,3],
    itemsDesktopSmall: [979,3],
    itemsMobile: [479,3],
});
$("#owl-demo4").owlCarousel({
    items: 3,
    itemsDesktop: [1199,3],
    itemsDesktopSmall: [979,3],
    itemsMobile: [479,3],
});
$("#owl-demoupload").owlCarousel({
    items: 7,
    itemsDesktop: [1199,3],
    itemsDesktopSmall: [979,3],
    itemsMobile: [479,3],
});