vmasciotta/magento2-owl-carousel

A simple module that allows you to use OwlCarousel with Magento 2

Maintainers

Details

github.com/vmasciotta/magento2-owl-carousel

Source

Issues

Installs: 2 802

Dependents: 0

Suggesters: 0

Security: 0

Stars: 22

Watchers: 5

Forks: 41

Open Issues: 1

Language:JavaScript

Type:magento2-module

1.0.1 2016-08-16 20:16 UTC

Requires

  • php: ~5.5.0|~5.6.0|~7.0.0
  • magento/module-ui: 100.1.*

OSL-3.0, AFL-3.0 7baf6f932d8949b9f5ea0e7a93b69bb35c70ca4b

This package is not auto-updated.

Last update: 2025-02-02 12:41:04 UTC

README

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>