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.

score 28 · Answer 1 · answered Sep 08 '15 at 05:21

28

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

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

answered Sep 08 '15 at 05:21

Risheekesh Yadav

281
3
2

Works perfect for me with owl-carousel v2.0.0. This option is also available at the responsive settings. – webster Sep 30 '15 at 13:01

score 17 · Answer 2 · answered Aug 06 '14 at 17:18

17

scrollPerPage : true

This may help

answered Aug 06 '14 at 17:18

Andrii Motsyk

439
5
6

score 8 · Answer 3 · edited Jun 30 '15 at 05:38

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.

NinoLopezWeb · Accepted Answer · 2014-02-24T17:57:03.977

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.

edited Feb 24 '14 at 17:57

answered Feb 21 '14 at 23:59

NinoLopezWeb

151
10

its not the good idea to update plugin. any other way is there to update. the owl carousel version 1.3.3 – Sibaram Sahu Mar 06 '18 at 09:34

Rizwan Akram · Answer 5 · 2016-10-10T13:44:44.710

3

Slide 2 items in OWL Carousel

Check this Example

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

edited Oct 10 '16 at 13:44

answered Oct 10 '16 at 12:43

Rizwan Akram

220
2
5

Please answer with some explanation. – Abhishek Gurjar Oct 10 '16 at 13:01

score 3 · Answer 6 · answered Nov 29 '18 at 03:21

3

You can easily add

slideBy: 2

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

answered Nov 29 '18 at 03:21

Chami M

146
1
7

score 2 · Answer 7 · edited Dec 16 '15 at 17:44

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.

score 1 · Answer 8 · answered Mar 24 '14 at 10:24

For Next button,

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

For Previous button,

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

Slide 2 items in OWL Carousel

8 Answers8

Linked