README

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

如何安装

现在这个模块可以通过Packagist获得！您不再需要指定仓库。

将以下行添加到composer.json文件中

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

或者直接在控制台执行命令

composer require kowal/owl-carousel

然后从Magento的主目录中输入以下命令

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

如何使用

使用data-mage-init

 
 <div id="kowal-owl-demo" data-mage-init='{
   "OwlCarousel":{
         "autoPlay": 3000,
         "items" : 5,
         "itemsDesktop" : [1290,3],
         "itemsDesktopSmall" : [768,3]
   }
 }
 '>
     <div class="item"><img src="/image1.jpg" alt="Image"></div>
     <div class="item"><img src="/image2.jpg" alt="Image"></div>
     <div class="item"><img src="/image3.jpg" alt="Image"></div>
     <div class="item"><img src="/image4.jpg" alt="Image"></div>
     <div class="item"><img src="/image5.jpg" alt="Image"></div>
     <div class="item"><img src="/image6.jpg" alt="Image"></div>
 </div>

使用<script>标签

 <div id="kowal-owl-demo">
     <div class="item"><img src="/image1.jpg" alt="Image"></div>
     <div class="item"><img src="/image2.jpg" alt="Image"></div>
     <div class="item"><img src="/image3.jpg" alt="Image"></div>
     <div class="item"><img src="/image4.jpg" alt="Image"></div>
     <div class="item"><img src="/image5.jpg" alt="Image"></div>
     <div class="item"><img src="/image6.jpg" alt="Image"></div>
 </div>
 
 <script type="text/x-magento-init">
     {
         "#kowal-owl-demo": {
             "OwlCarousel": {
                 "autoPlay": 3000,
                 "items": 5,
                 "itemsDesktop": [1290, 3],
                 "itemsDesktopSmall": [768, 3]
             }
         }
     }
 </script>