Skip to content

This module lets you use OwnCarousel2 with Magento 2 throught requirejs

License

Notifications You must be signed in to change notification settings

magespecialist/m2-MSP_OwlCarousel2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Magento 2 OwlCarousel2 module

PHP version

This module lets you use OwlCarousel2 with Magento 2 through requirejs.

Installation

composer require msp/owlcarousel2
bin/magento setup:upgrade

Usage

Initialization

You can init the slider with data-mage-init:

<div id="your-slider" class="owl-carousel" data-mage-init='{
    "OwlCarousel": {
      "autoPlay"          :   true,
      "autoplayTimeout"   :   1500,
      "loop"              :   true,
      "items"             :   1,
      "dots"              :   false
    }
}'>
    <img src="kitten1.jpg" />
    <img src="kitten2.jpg" />
    <img src="kitten3.jpg" />
    <img src="kitten4.jpg" />
</div>

or with a <script type="text/x-magento-init">:

<div id="your-slider" class="owl-carousel">
    <img src="kitten1.jpg" />
    <img src="kitten2.jpg" />
    <img src="kitten3.jpg" />
    <img src="kitten4.jpg" />
</div>
<script type="text/x-magento-init">
     {
         "#your-slider": {
             "OwlCarousel": {
                "autoplay"        : true,
                "autoPlayTimeout" : 1500,
                "loop"            : true,
                "items"           : 1,
                "dots"            : false
             }
         }
     }
 </script>

OwlCarousel theme css

This module loads only the base css from OwlCarousel, but no theme. The default theme is included, and you can add it to your theme layout default.xml (or whatever layout file) with:

...
    <head>
        ...
        <css src="Msp_OwlCarousel2::css/owl.theme.default.min.css" />
        ...
    </head>
...