README

此简单模块允许您按照 Magento 的方式使用 OwlCarousel。

如何安装

此模块现在可通过 Packagist 提供！您不再需要指定存储库。

将以下行添加到您的 composer.json 中

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

或简单地输入

composer require birenk/magento2-owl-carousel

然后从您的 Magento 根目录中键入以下命令

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

如何使用

使用 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>

使用 <script> 标签

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