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:

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)

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:

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)

• javascript
• jquery
• css
• owl-carousel

1 Answer 1

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)