msp/owlcarousel2

Maintainers

Package info

github.com/magespecialist/m2-MSP_OwlCarousel2

Language:JavaScript

Type:magento2-module

pkg:composer/msp/owlcarousel2

Statistics

Installs: 37 448

Dependents: 0

Suggesters: 0

Stars: 15

Open Issues: 1

Security

Advisories: 0

Aikido package health analysis

0.1.6 2018-03-28 10:41 UTC

Requires

OSL-3.0 41863382cb1f4cc7eac638ab07ff816932af714a

This package is auto-updated.

Last update: 2026-03-01 00:22:19 UTC

README

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>
...