Owl-Carousel, scroll two items at a time
You can use the slideBy
option.
owl = $('.owl-carousel')
owl.owlCarousel({
center: true,
loop: false,
margin: 20,
items: 2,
responsive: {
0: {
items: 1,
navigation: true,
nav: true,
slideBy: 1 // <!-- HERE
},
640: {
items: 2,
navigation: true,
nav: true,
slideBy: 2 // <!-- HERE
}
},
scrollPerPage: true,
navigation: true
}).css("z-index", 0)
jbehrens94
Student Creative Media & Game Technologies @ Rotterdam University of Applied Sciences. Looking for an internship abroad, if you know something, please do get in touch! (Preferably Scandinavia/Germany/UK/US/Australia) Also employed as peer coach at Creative Media and Game Technologies. Huge fan of Ruby on Rails, C#/.NET and other modern languages. Also interested in server management, but mainly focused at programming.
Updated on July 09, 2022Comments
-
jbehrens94 almost 2 years
I am working on a slider with Owl-Carousel 2 (beta), but there is a lot that doesn't work well. I want the owlCarousel to work like this:
It should scroll 2 items at a time, showing 2 items at a time. So: [0,1] slide [2,3] slide [4,5]
On mobile, it should show one picture and scroll by 1 picture at a time.
owl = $('.owl-carousel') owl.owlCarousel({ center: true, loop: false, margin: 20, items: 2, responsive: { 0: { items: 1, navigation: true, nav: true }, 640: { items: 2, navigation: true, nav: true } }, scrollPerPage: true, navigation: true }).css("z-index", 0)