Slide 2 items in OWL Carousel

Question

I am using an OWL Carousel for my slider.

What I am trying to do is slide 2 items when next previous is clicked.

So its sliding to every second item still showing the second item during the transmission.

I have tried to work it out with CSS but no success.

Here is my basic setup

$("#owl-demo").owlCarousel({

  navigation : true, // Show next and prev buttons
  slideSpeed : 600,
  paginationSpeed : 400,
  singleItem:true,

  // "singleItem:true" is a shortcut for:
  // items : 2 
  // itemsDesktop : false,
  // itemsDesktopSmall : false,
  // itemsTablet: false,
  // itemsMobile : false

});

Any help much appreciated.

Thanks in advance.

Answer 1

The above answers are helpful but they are incomplete.

Replace Line 558 in owl.carousel.js:

base.currentItem += base.options.scrollPerPage === true ? base.options.items : 2;

Replace line 559 in owl.carousel.js with:

if (base.currentItem > base.maximumItem + (base.options.scrollPerPage === true ? (base.options.items - 1) : 0)) {

This will make the carousel scroll by 2 when you click next but you still need to account for when a user clicks on the prev button. The Following will do just that

Replace line 581 in owl.carousel.js with:

base.currentItem -= base.options.scrollPerPage === true ? base.options.items : 2;

Now you need to account for an odd number of items in your carousel so it will click all the way through every item.

Add this code on line 582 directly under the code in the previous step:

if (base.currentItem === -1) base.currentItem = 0;

I hope this help.

Answer 2

Slide 2 items in OWL Carousel

Check this Example

http://jsfiddle.net/k0nn7yw5/107/

Answer 3

jQuery(".view-id-frontpage .view-content").owlCarousel( {
  items: 2,
  itemsDesktop : [1000,2], // 2 items between 1000px and 901px
  itemsDesktopSmall : [900,2], // betweem 900px and 601px
  itemsTablet: [700,1], // 2 items between 600 and 480
  itemsMobile : [479,1] , // 1 item between 479 and 0
  navigation: true,
  lazyLoad: true,
  pagination: false,
  scrollPerPage : true
});

This helped me.

Answer 4

In the current version of Owl Carousel (1.3.2), find the "owl.carousel.js" file and scroll to line #558. The line will read:

base.currentItem += base.options.scrollPerPage === true ? base.options.items : 1;

Change the last number to "2" so that it reads:

base.currentItem += base.options.scrollPerPage === true ? base.options.items : 2;

Save the file, and that should make the slider move by two items.

Answer 5

You can easily add

slideBy: 2

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Answer 6

Don't change plugin code, you just need to intialize carousel with slideBy option as mentioned below.

//Initialize Plugin
$(".owl-carousel").owlCarousel(
  {
    slideBy: 4
  }
);