Owl Carousel module for Magento 2
Clone or download
Latest commit 812f713 Dec 28, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
etc first code commit Feb 6, 2016
view/frontend update readme, adding owl.carousel.js and original license Feb 14, 2016
LEGGIMI.md update LEGGIMI e README Nov 13, 2016
LICENSE.txt adding right licenses Feb 6, 2016
LICENSE_AFL.txt adding right licenses Feb 6, 2016
README.md update readme.md Dec 28, 2016
composer.json update composer.json Aug 16, 2016
registration.php first code commit Feb 6, 2016

README.md

Magento 2 Owl Carousel

This simple module allows You to use OwlCarousel following the Magento way.

How to install

This module is now available through Packagist ! You don't need to specify the repository anymore.

Add the following lines into your composer.json

...
"require":{
    ...
    "vmasciotta/magento2-owl-carousel":"^1.0.0"
 }

or simply digit

composer require vmasciotta/magento2-owl-carousel

Then type the following commands from your Magento root:

$ composer update
$ ./bin/magento cache:disable
$ ./bin/magento module:enable Vmasciotta_OwlCarousel
$ ./bin/magento setup:upgrade
$ ./bin/magento cache:enable

How to use

Using data-mage-init:

<div id="owl-demo" data-mage-init='{
  "OwlCarousel":{
        "autoPlay": 3000,
        "items" : 4,
        "itemsDesktop" : [1199,3],
        "itemsDesktopSmall" : [979,3]
  }
}
'>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg" alt="Owl Image"></div>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl2.jpg" alt="Owl Image"></div>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg" alt="Owl Image"></div>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl4.jpg" alt="Owl Image"></div>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl5.jpg" alt="Owl Image"></div>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl6.jpg" alt="Owl Image"></div>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl7.jpg" alt="Owl Image"></div>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl8.jpg" alt="Owl Image"></div>
</div>

Using <script> tag:

<div id="owl-demo">
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg" alt="Owl Image"></div>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl2.jpg" alt="Owl Image"></div>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg" alt="Owl Image"></div>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl4.jpg" alt="Owl Image"></div>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl5.jpg" alt="Owl Image"></div>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl6.jpg" alt="Owl Image"></div>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl7.jpg" alt="Owl Image"></div>
    <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl8.jpg" alt="Owl Image"></div>
</div>

<script type="text/x-magento-init">
    {
        "#owl-demo": {
            "OwlCarousel": {
                "autoPlay": 3000,
                "items": 4,
                "itemsDesktop": [1199, 3],
                "itemsDesktopSmall": [979, 3]
            }
        }
    }
</script>