msp/lightslider

LightSlider 的 Magento 模块包装器

维护者

详细信息

github.com/magespecialist/m2_MSP_LightSlider

源代码

问题

安装量: 23,716

依赖项: 0

建议者: 0

安全性: 0

星标: 4

关注者: 5

分支: 0

开放问题: 0

语言:JavaScript

类型:magento2-module

0.1.2 2017-02-01 15:12 UTC

Requires

OSL 3.0 cd1d6d0a52b02469c53f924f13e6e2e3be42f6c9

This package is auto-updated.

Last update: 2024-08-28 23:13:58 UTC

README

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

安装

composer require msp/lightSlider
bin/magento module:enable MSP_LightSlider
bin/magento setup:upgrade

使用

您必须通过布局 XML 包含 CSS，例如，如果您想在产品页面中使用相册，请将以下内容添加到 catalog_product_view.xml

<head>
    ...
    <css src="MSP_LightSlider::css/lightslider.min.css"/>
    ...
</head>

您可以使用 data-mage-init 初始化相册

<div id="your-slider" data-mage-init='{
    "LightSlider": {
        "item": 1
    }
}'>
    <a href="img/kitten1.jpg">
        <img src="img/kitten1-thumb.jpg" />
    </a>
    <a href="img/kitten2.jpg">
        <img src="img/kitten2-thumb.jpg" />
    </a>
    <a href="img/kitten3.jpg">
        <img src="img/kitten3-thumb.jpg" />
    </a>
</div>

或使用 <script type="text/x-magento-init">

<div id="your-gallery">
    <a href="img/kitten1.jpg">
        <img src="img/kitten1-thumb.jpg" />
    </a>
    <a href="img/kitten2.jpg">
        <img src="img/kitten2-thumb.jpg" />
    </a>
    <a href="img/kitten3.jpg">
        <img src="img/kitten3-thumb.jpg" />
    </a>
</div>
<script type="text/x-magento-init">
     {
         "#your-slider": {
             "LightSlider": {
                 "item": 1
             }
         }
     }
</script>