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.

Solution 1

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.

Solution 2

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

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

Solution 3

scrollPerPage : true

This may help

Solution 4

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.

Solution 5

Slide 2 items in OWL Carousel

Check this Example

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

View more solutions

Comments

[webster]

Works perfect for me with owl-carousel v2.0.0. This option is also available at the responsive settings.

[Abhishek Gurjar]

Please answer with some explanation.

[sibaspage]

its not the good idea to update plugin. any other way is there to update. the owl carousel version 1.3.3