5

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?

10

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.

  • 1
    FYI if you don't need display: flex you can disable by setting the less variable @use-flex to false. – Ben Crook May 26 '16 at 14:40
  • thanks, Mark. I was trying to resolve it for 2 hours, but the solution was on the top :) – c0rewell Feb 27 '17 at 19:37
  • It was long awaited and a prefect work around. – Umar Yousaf Dec 11 '18 at 18:35
  • so what exactly did you guys do to fix it, it still comes same after doing what is mentioned here? – Rakeschand Mar 11 at 10:28
  • @UmarYousaf what did you do ? – Rakeschand Mar 11 at 14:22
1

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.

0

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

  • 1
    Thanks for your reply, but I have tried this. It seems to be something to do with the Magneto/Blank style (when the style-l is ignored when the screen is resized) – Mark Lloyd Mar 12 '16 at 10:46
  • ok...i think you missed something. – Anand Ontigeri Mar 12 '16 at 14:48
0

change meta viewport as below

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  • This is not a good solution and likely wouldn't even fix the problem, this will prevent the use from scaling on their device. This would be terrible for users with visual difficulties. – Ben Crook Sep 22 '16 at 16:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.