Rubin Shrestha
Zend certified PHP/Magento developer
Rubin Shrestha
Blog

Magento 2 Owl Carousel showing giant images and no automatic play

by |Published

I just configured owlCarousel by using a jquery widget and using it with data-mage-init on my template.

The problem is that images are giant, no automaticPlay, no arrows nor dots, in despite that I’m adding them on the config object.

Here is my code:

template:
magento/app/code/Vendor/HomePage/view/frontend/templates/carousel.phtml

<div class="carousel-wrap">
    <div class="owl-carousel" data-mage-init='{
    "carouselOscar":{
        "items": 1, 
        "autoPlay": true,
        "autoplayTimeout": 1500,
        "loop": true,
        "dots": false,
        "navigation" : true,
        "itemsDesktop" : [1199,3],
        "itemsDesktopSmall" : [979,3]
        }
     }'>
        <div class="item"><img src="https://picsum.photos/id/237/200/300"></div>
        <div class="item"><img src="https://picsum.photos/id/238/200/300"></div>
        <div class="item"><img src="https://picsum.photos/id/239/200/300"></div>
    </div>
</div>

carouselOscar.js magento/app/code/Vendor/HomePage/view/frontend/web/js/carouselOscar.js

define([
    'jquery',
    'OwlCarousel-min'
], function($) {
    'use strict';
    $.widget('custom.slider',{

        _create: function(config,element) {
            console.log(this.options);
            this.element.owlCarousel(this.options);
        }
    });

    return $.custom.slider;
});

requirejs-config.js magento/app/code/Vendor/HomePage/view/frontend/requirejs-config.js

var config={
    map: {
        '*':{
            'carouselOscar':'Oscar_HomePage/js/carouselOscar'
        }
    },
    shim:{
        'carouselOscar':{
            deps:['jquery','OwlCarousel']
        }
    }
}

Also I added the css on my default_head_blocks.xml layout:
magento/app/design/frontend/Newranch/Aranda/Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="https://use.fontawesome.com/releases/v5.7.1/css/all.css" src_type="url"/>
        <css src="Msp_OwlCarousel2::css/owl.theme.default.min.css" />
    </head>
</page>

Everything looks good, so I don’t know what could be causing the issue.
If I try to slide an image to see the next one I can do that, but it does not loop automatically, and image is giant, it looks blurry and ugly.

Thanks!

You may also like