Owlcarousel2: Multiple rows?

[khodan]

Is it possible to add multiple rows in owlcarousel?
Something like this:

1 2 3
1 2 3

[alfouz]

I don't understand the reason to do that. Do you want each row spin independently or together?

If it's the first, you may create two independent carousels, one of the top of the other.
If it's the second, you can create a "double item" inside each one cell, and treat the click event (or whatever you want) in the inside element.

I think this is the best way to do what you want

I hope this helps you

[amberlionk]

The problem occurs when you want to make good responsive carousel.

for example:
1200 view: (2 rows; 6 items)
X X X
X X X

600 view: (1 row 3 etems)
X X X

450 view: (one item visible)
X

this can not be made by creation of "double item"

it would be wonderful if i could make something like this
responsive: {
450: {
items:1,
rows:1
},
600:{
items:3,
rows:1
},
1200:{
items:6,
rows:2
}
}

[reimax]

Is it possible to add multiple rows in owlcarousel?
Owl2row plugin not work...

[chicken-suop]

Duplicate of #252

[pascalporedda]

I don't really see a reason for this, as you could simply use two carousels and link them together with the link plugin.

[semaf]

@pascalporedda
The logic is easy to understand. You can show on smaller screens more instead to scroll all the time. A mobile phone has a height of approx. 320px width and 600px heigh. An image with 150px to 150px size is big enough to see which means I could show 6 images on a screen.

@amberlionk
But it would be possible to list and how you said it would be wonderful if is row syntax is available

Like:
1 3 5 7 9
2 4 6 8 10

[khalidaljaaidi]

I know this is closed and old, but I needed this and hacked my own solution to it using CSS, and then disabled the CSS hack for smaller than desktop to use the native responsive features. Took a lot of figuring out but the hack is very contained and like 10-15 lines or so.

`
@media only screen and (min-width: 768px) {

.owl-nav {
display:none;
}

.owl-stage {
transform: none !important;
width: 100% !important;
}

.owl-carousel .owl-stage-outer {

width: 110%;
overflow: visible;

}

ProductThumbs > .owl-stage-outer > .owl-stage > .owl-item {

display: inline-grid;
float: none;

}
}
`

The lines
display: inline-grid; float: none;

Are the biggest secret of this

[taralmaxwell]

Thank you very much, @khalidaljaaidi, for posting this 'fix' to the multiple row responsive request!

[desjhit]

Just registered to say thanks to @khalidaljaaidi for this incredibly elegant solution. Thanks, mate.

In my case, it wasn't even necesary the last #ProductThumb (whatever id) part.

[Mirriam-Maina]

Thank you so much @khalidaljaaidi

[Tolc]

Hey y'all!
As I needed a true responsive multiple rows owl carousel (meaning it keeps slides ordered for all window sizes) for a project, and saw it is still a quite popular request, I figured I'd set up a codepen for anyone that might need it as well.

So here it is: https://codepen.io/Tolc/pen/OJXyKpo

What it achieves is basically this kind of responsive carousel:

desktop                   tablet                    mobile
cols: 3, rows: 2          cols: 2, rows: 3          cols: 1, rows: 2
1 2 3 -> 7 8 9            1 2 -> 7 8                1 -> 3 -> ...
4 5 6    10...            3 4    9 10               2    4
                          5 6    ...

This is just an example, the code works with any number of columns and rows and any breakpoint.

Code is commented in the pen, but if you need further explanation, here is the corresponding post on Stack Overflow

[269986972]

大家好！
当我为一个项目需要一个真正的响应式多行猫头鹰旋转木马（意味着它可以按所有窗口大小对幻灯片进行排序），并且看到它仍然是一个非常受欢迎的请求时，我认为我会为可能需要它的任何人设置一个码本也一样

所以这里是：https : //codepen.io/Tolc/pen/OJXyKpo

它实现的基本上是这种响应式轮播：

desktop                   tablet                    mobile
cols: 3, rows: 2          cols: 2, rows: 3          cols: 1, rows: 2
1 2 3 -> 7 8 9            1 2 -> 7 8                1 -> 3 -> ...
4 5 6    10...            3 4    9 10               2    4
                          5 6    ...

这只是一个示例，该代码可用于任何数量的列和行以及任何断点。

笔中注释了代码，但是如果您需要进一步的说明，这是Stack Overflow上的相应文章

cols: 3, rows:3

if item=20， the last page shows:
12 19 20
15
18

[Tolc]

@269986972 (what an odd username)
That's the expected behavior.

Your last page would actually just be '19 20 blank', but Owl Carousel does not ever leave a blank space to the right to match your page size, so it keeps the last column(s) of the previous page to the left.

Illustration of your case to make it clearer:

1 2 3      10 11 12     19 20
4 5 6  ->  13 14 15  -> 
7 8 9      16 17 18