猫头鹰轮播，一次滚动两个项目 [英] Owl-Carousel, scroll two items at a time

问题描述

我正在使用Owl-Carousel 2(测试版)的滑块，但是有很多不能很好地工作. 我希望owlCarousel像这样工作:

I am working on a slider with Owl-Carousel 2 (beta), but there is a lot that doesn't work well. I want the owlCarousel to work like this:

它应该一次滚动2个项目，一次显示2个项目. 因此:[0,1] 幻灯片 [2,3] 幻灯片 [4,5]

It should scroll 2 items at a time, showing 2 items at a time. So: [0,1] slide [2,3] slide [4,5]

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

On mobile, it should show one picture and scroll by 1 picture at a time.

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)

推荐答案

您可以使用 slideBy 选项.

You can use the slideBy option.

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)

这篇关于猫头鹰轮播，一次滚动两个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！