javascript - Owl Carousel - 多个 slider 不同的控制

Question

我正在考虑在多个位置实现 slider ，并且需要单独控制每个 slider ，在单个页面上控制两次，然后在网站的其他位置控制两次，所以理想情况下我希望它们:

• 一次移动一张幻灯片
• 一次移动 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],
});