README

渲染一个JQuery LightSlider小部件并集成lightGallery到Yii2。

安装

通过 composer 安装此扩展是首选方式。

运行以下命令

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

或在您的 composer.json 文件的 require 部分添加

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

到

使用方法

扩展安装后，只需在代码中通过以下方式使用它

<?= \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
]) ?>

集成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'
                });
            }
        "),
        //...        
    ],
    //...
]) ?>

测试

vendor/bin/phpunit

更多信息

请参阅 JQuery LightSlider 和 lightGallery

许可协议

MIT许可（MIT）。有关更多信息，请参阅许可文件

Sensio Labs