PHP code example of algsupport / yii2-swiperjs-8

1. Go to this page and download the library: Download algsupport/yii2-swiperjs-8 library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php. 
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

algsupport / yii2-swiperjs-8 example snippets



namespace yournamespace

use algsupport\swiperjs8\SwiperSlider;

//Code ...



    echo \algsupport\swiperjs8\SwiperSlider::widget([
        'slides' => [
            'one',
            'two',
            'three',
            '<img src="https://swiperjs.com/demos/images/nature-1.jpg">',
            '<img src="https://swiperjs.com/demos/images/nature-2.jpg">'
        ],
    ]);



    echo \algsupport\swiperjs8\SwiperSlider::widget([
        // 'on ' . \algsupport\swiperjs8\SwiperSlider::EVENT_AFTER_REGISTER_DEFAULT_ASSET => function(){
        //     CustomAsset::register($view);
        // },
        'showScrollbar' => true,
        'slides' => [
            [
                'value' => 'ggg',
                'options' => [
                    'style' => ["background-image" => "url(https://swiperjs.com/demos/images/nature-1.jpg)"]
                ]
            ],
            '<img src="https://swiperjs.com/demos/images/nature-2.jpg">',
            'one',
            'two',
            'three',
            'fore',
            'five'
        ],
        // 'assetFromCdn' => true,
        'clientOptions' => [
            'slidesPerView' => 4,
            'spaceBetween'=> 30,
            'centeredSlides'=> true,
            'pagination' => [
                'clickable' => true,
                'renderBullet' => new \yii\web\JsExpression("function (index, className) {
                        return '<span class=\"' + className + '\">' + (index + 1) + '</span>';
                    },
                "),
                ],
                "scrollbar" => [
                    "el" => \algsupport\yii2-swiperjs-8\SwiperSlider::getItemCssClass(SwiperSlider::SCROLLBAR),
                    "hide" => true,
                ],
        ],

        //Global styles to elements. If create styles for all slides
        'options' => [
            'styles' => [
                \algsupport\yii2-swiperjs-8\SwiperSlider::CONTAINER => ["height" => "100px"],
                \algsupport\yii2-swiperjs-8\SwiperSlider::SLIDE => ["text-align" => "center"],
            ],
        ],
            
    ]);


echo \algsupport\yii2-swiperjs-8\SwiperSlider::widget([
    ...
'on ' . \algsupport\yii2-swiperjs-8\SwiperSlider::EVENT_AFTER_REGISTER_DEFAULT_ASSET => function(){
        CustomAsset::register($view);
},


'clientOptions' => [
    'slidesPerView' => 4,
    'spaceBetween'=> 30,
    'centeredSlides'=> true,
    'pagination' => [
        'clickable' => true,
        'renderBullet' => new \yii\web\JsExpression("function (index, className) {
                return '<span class=\"' + className + '\">' + (index + 1) + '</span>';
            },
        "),
        ],
        "scrollbar" => [
            "el" => \algsupport\yii2-swiperjs-8\SwiperSlider::getItemCssClass(SwiperSlider::SCROLLBAR),
            "hide" => true,
        ],
],