owl-carousel : how to change dynamically the data-items (number of columns) ?

Question

Hello,

I have a carousel showing 3 columns that works perfectly :


	
![attachment](/images/1.png)

	
![attachment](/images/2.png)

	
![attachment](/images/3.png)

	
![attachment](/images/4.png)

	
![attachment](/images/5.png)

But to handle responsive properly, I would like to change the "data-items" property dynamically depending on the screen width. For exampe, I would like that number to be :

"3" for lg and md
"2" for sm
"1" for xs and xxs

I could display 3 times this carousel with each values, and hiding/showing the good one(s) depending on the current width but that doesn't seem like a nice way to handle responsivity.

Also, this should work even if the user resize the browser dynamically (not only on page load).

Maybe you have an idea on how I could handle that properly ?

Thank you very much

SemiColonWeb · Accepted Answer

Hello,

This is Already Possible with the current functionality. You can simply use the data-items-xl, data-items-lg, data-items-md, data-items-sm and data-items-xs Attributes according to the number of Carousel Items you would like to display on the Device Size. Example:

...

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.