msp/owlcarousel2

维护者

详细信息

github.com/magespecialist/m2-MSP_OwlCarousel2

源代码

问题

安装数量: 36,719

依赖: 0

建议者: 0

安全: 0

星标: 15

关注者: 9

分支: 8

开放问题: 1

语言:JavaScript

类型:magento2-module

0.1.6 2018-03-28 10:41 UTC

Requires

OSL-3.0 41863382cb1f4cc7eac638ab07ff816932af714a

This package is auto-updated.

Last update: 2024-08-28 22:37:23 UTC

README

PHP version

此模块允许您通过requirejs在Magento 2中使用OwlCarousel2。

安装

composer require msp/owlcarousel2
bin/magento setup:upgrade

使用

初始化

您可以使用 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>

或使用 <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主题CSS

此模块仅加载OwlCarousel的基础CSS，但不加载主题。默认主题已包含在内，您可以通过将以下代码添加到您的主题布局文件 default.xml（或任何布局文件）中来添加它：

...
    <head>
        ...
        <css src="Msp_OwlCarousel2::css/owl.theme.default.min.css" />
        ...
    </head>
...