Owl Carousel Magento 2 not Fully Responsive

Question

I would like to use Owl Carousel in a new Magento 2 install, but I am having issues when resizing the browser window. I have a clean and working install of Magento 2. I have created a very simple theme that extends the standard Magento Blank theme. My custom them just loads the required css and javascript stuff for the Owl Carousel , nothing more. I have followed the steps in this tutorial (http://www.boolfly.com/magento-2-slider-with-owl-carousel), using my custom theme, and I can confirm that the Owl Carousel works and preforms as expected.

The issue happens when I resize the browser to ensure it works in a responsive way. When the browser reaches 768px, the carousel goes full width (off the page with browser scroll bars). I have tried a simple dummy web page (not Magento) and the carousel works perfectly.

As such I can only assume it has something to do with the css of the Magento/Blank theme or a simple schoolboy error on my part. Do you guys have any ideas?

-- Edit --

When using a theme that inherits the Magento/Blank theme, the issue happens at 767px and below. To test my theory that the mobile only style was the issue, I removed the mobile only style and set up the desktop style (css/styles-l.css) to have no media options. When the page was reloaded, the resizing issue did not occur. I also tried removing css/styles-l.css and only using css/styles-m.css to see if the would have the sizing issue, and it does.

So for some reason, Owl Carousel and the Magento/Blank theme dos not play nicley together below 767px. I haven't had the time to really look into the mobile style as of yet but I will do. Does any CSS people have any idea of where this issue might be found or what area I might look at first?

Answer 1

After some testing I have found the issue. The div section with a class of columns is set to display:flex on screen sizes 767px or below. This display setting is causing the viewpoint to expand to the maximum size. As the Owl Carousel is large in length, the viewpoint expands to accommodate this.

Obviously a display setting of flex is better for smaller views, so to overcome this issue, setting overflow to hidden, scroll or auto on the div.column.main has fixed the issue.

I'm not 100% sure if this will have any repercussions later on, but for now this has fixed the issue and may help anyone else with the same problem.

Answer 2

The solution i have found to this problem is giving the offending element a width of 100%.

.columns .column.main {
    width: 100%;
}

Because the .columns is set to display: flex, the element under it has no fixed width. When you give it a width, the slider images are contained inside of 100% of the container, and this container is now set to 100% of the view port.

This has worked for me on a few different project in Magento 2 so far. It seems like this is a default setting in the blank theme that has to be addressed when use owl carousel.

Answer 3

you have to specify the range and number of item inside the carousel try below code in your custom js it will work fine.
rewindNav : false,
pagination : false,
items : 4,//greater than 992
itemsDesktopSmall : [992,3], // betweem 992px and 768px
itemsTablet: [767,1], //1 items between 767 and 0
itemsMobile : false,// itemsMobile disabled - inherit from itemsTablet option

Answer 4

change meta viewport as below

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>