CODEWITHSUNDEEP
javascriptjquerycsscarouselowl-carousel
Dom
Dom

Reputation: 3126

Slide 2 items in OWL Carousel

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.

Upvotes: 12

Views: 76749

Answers (8)

Chami M
Chami M

Reputation: 144

You can easily add 

slideBy: 2

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

Upvotes: 3

Rizwan Akram
Rizwan Akram

Reputation: 230

Slide 2 items in OWL Carousel

Check this Example

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

Upvotes: 3

Ben Callis
Ben Callis

Reputation: 21

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.

Upvotes: 2

Risheekesh Yadav
Risheekesh Yadav

Reputation: 281

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

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

Upvotes: 28

Valentina
Valentina

Reputation: 81

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.

Upvotes: 8

Andrii Motsyk
Andrii Motsyk

Reputation: 439

scrollPerPage : true

This may help

Upvotes: 17

Kiran
Kiran

Reputation: 1210

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;

Upvotes: 1

NinoLopezWeb
NinoLopezWeb

Reputation: 151

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.

Upvotes: 4

Related Questions