msp/lightslider

Magento module wrapper for LightSlider

Maintainers

Details

github.com/magespecialist/m2_MSP_LightSlider

Source

Issues

Installs: 23 626

Dependents: 0

Suggesters: 0

Security: 0

Stars: 4

Watchers: 5

Forks: 0

Open Issues: 0

Language:JavaScript

Type:magento2-module

0.1.2 2017-02-01 15:12 UTC

Requires

OSL 3.0 cd1d6d0a52b02469c53f924f13e6e2e3be42f6c9

This package is auto-updated.

Last update: 2024-04-28 22:33:42 UTC

README

This module lets you use lightSlider with Magento 2 throught requirejs.

Installation

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

Usage

You must include the css via layout XML, for example if you want to use the gallery in the product page add to catalog_product_view.xml:

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

You can init the gallery with 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>

or with a <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>