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.

回答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.

回答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
  }
);

回答3:

scrollPerPage : true

This may help

回答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.

回答5:

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.

回答6:

Slide 2 items in OWL Carousel

Check this Example

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

回答7:

You can easily add

slideBy: 2

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

回答8:

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;