JQuery LightSlider Widget

Renders a JQuery LightSlider widget and Integrate with lightGallery for Yii2.

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require dominus77/yii2-light-slider-widget

or add

"dominus77/yii2-light-slider-widget": "^1.0"

to the require section of your composer.json file.

Usage

Once the extension is installed, simply use it in your code by :

<?= \dominus77\lightslider\Slider::widget([
    'items' => ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7'],
    'clientOptions' => [
        // settings: http://sachinchoolur.github.io/lightslider/settings.html
        'item' => 3,
        'autoWidth' => false,
        'slideMove' => 1, // slidemove will be 1 if loop is true
        'slideMargin' => 10,
        //...        
    ],
    'listOptions' => [], // Set <ul> options
    'itemsOptions' => [], // Set options <li> all
]) ?>

Integrate with lightGallery

<?= \dominus77\lightslider\Slider::widget([
    'id' => 'myGalleryID',
    'items' => [
        [
            'item' => \yii\helpers\Html::img(\Yii::getAlias('@web/uploads/img/image1.jpg')),
            'options' => [
                'data-thumb' => \Yii::getAlias('@web/uploads/img/thumb/image1.jpg'),
                'data-src' => \Yii::getAlias('@web/uploads/img/largeImage1.jpg'),
                //...
            ]
        ],
        [
            'item' => \yii\helpers\Html::img(\Yii::getAlias('@web/uploads/img/image2.jpg')),
            'options' => [
                'data' => [
                    'thumb' => \Yii::getAlias('@web/uploads/img/thumb/image2.jpg'),
                    'src' => \Yii::getAlias('@web/uploads/img/largeImage2.jpg'),
                ],
                //...
            ]
        ],
        //...
    ],
    'clientOptions' => [            
        'gallery' => true,
        'item' => 1,
        'loop' => true,
        'thumbItem' => 9,
        'slideMargin' => 0,
        'enableDrag' => false,
        'currentPagerPosition' => 'left',
        'onSliderLoad' => new \yii\web\JsExpression("
            function(el) {
                el.lightGallery({
                    // options: http://sachinchoolur.github.io/lightGallery/docs/api.html
                    selector: '#myGalleryID .lslide'
                });
            }
        "),
        //...        
    ],
    //...
]) ?>

Tests

vendor/bin/phpunit

More Information

Please, check the JQuery LightSlider and lightGallery

License

The MIT License (MIT). Please see License File for more information.

Sensio Labs