Question

我正在制作一个带有Owl-Carousel 2（测试版）的滑块，但有很多功能并不好用。我想让owlCarousel像这样工作：

它应该一次滚动2个项目，一次显示2个项目。所以：[0,1] 幻灯片 [2,3] 幻灯片 [4,5]

在移动设备上，它应该显示一张图片并一次滚动1张图片。

owl = $('.owl-carousel')
  owl.owlCarousel({
    center: true,
    loop: false,
    margin: 20,
    items: 2,
    responsive: {
      0: {
        items: 1,
        navigation: true,
        nav: true
      },
      640: {
        items: 2,
        navigation: true,
        nav: true
      }
    },
    scrollPerPage: true,
    navigation: true
  }).css("z-index", 0)

Answer 1

您可以使用slideBy选项。

owl = $('.owl-carousel')
  owl.owlCarousel({
    center: true,
    loop: false,
    margin: 20,
    items: 2,
    responsive: {
      0: {
        items: 1,
        navigation: true,
        nav: true,
        slideBy: 1 // <!-- HERE
      },
      640: {
        items: 2,
        navigation: true,
        nav: true,
        slideBy: 2 // <!-- HERE
      }
    },
    scrollPerPage: true,
    navigation: true
  }).css("z-index", 0)

Owl-Carousel，一次滚动两个项目

1 个答案: