Owlcarousel2: Multiple rows

[claudchan]

Add option to add multiple rows.

[witrin]

Could you be a little bit more precisely. I don't get it currently.

[claudchan]

Example Multiple rows carousel: http://www.richardscarrott.co.uk/app/webroot/assets/javascript/jquery/carousel/demo/
See last demo.
Just my request. Not sure if this possible to have in owl carousel 2.

[yunusga]

https://github.com/bubbaleh/OwlCarousel2-Rows minimal plugin

rows: true,
rowsCount: 2 // 3,5,6 ...

[zhouhao27]

Is it possible to mix single and double rows? For example, the first item is one row, the rest are two row. And the width the items are different.

[dingo-d]

I am wondering the same. It would be cool to have the option to have one item in one row, next two in two rows, etc.

[Webdinge]

@yunusga Does this plugin still works with the newest Owl? I can't get it started in my project! I've added your JS as single file after the original owl files. But that doesn't seem to work. Do I need to paste your code inside the original JS files from Owl? That's also what I did but that doesn't seem to work neither.

[amavlopes]

Same here @Webdinge , I have tried the same, but nothing seems to work.

[Luc45]

I'm also looking for this functionallity.

I want to show two rows without swipe on desktop, and one row and one column on mobile

[dFelinger]

Just use wrapper script before initialization of carousel like this:

if ($(window).width() < 480) { // only for mobile devices
  $('.owl-carousel .item').each(function(index) {
    if (index % 2 == 0) { // wrap by 2 items
      $(this).add($(this).next('.item')).wrapAll('<div class="item__col" />');
    }
  });
}

[padaliyajay]

I also want to this functionality. very importent feature in carousel

[helloromero]

+1

[SrikalyanBurra]

+1

[usamamashkoor]

Has anyone found solution for this...?

[dev-sammy]

Yes really need this feature inbuilt as sometimes in mobile responsive its not feasible to show two or more rows we just need to show one and multiple on desktop keeping the number of items same. Now we have to insert multiple blocks in a single item which isn't right.

[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上的相应文章

I came across a situation:
123
456
789
If there are 20 items, 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