public function testBatchItemsInjectionViaSpecialMethodSuccessed()
{
$swiper = new Swiper(['items' => ['slide 01', ['content' => 'slide 02'], new Slide('slide 03')]]);
$swiper->addItems(['slide 04', ['content' => 'slide 05'], new Slide('slide 03')]);
$swiper->run();
}
<?php /** * @var \yii\web\View $this */ use romkaChev\yii2\swiper\Swiper; echo Swiper::widget(['items' => ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9', 'Slide 10'], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION, Swiper::BEHAVIOUR_NEXT_BUTTON, Swiper::BEHAVIOUR_PREV_BUTTON], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_SPACE_BETWEEN => 30]]);
<?php /** * @var \yii\web\View $this */ use romkaChev\yii2\swiper\Swiper; echo Swiper::widget(['items' => [['background' => 'http://lorempixel.com/1000/1000/nightlife/1'], ['background' => 'http://lorempixel.com/1000/1000/nightlife/2'], ['background' => 'http://lorempixel.com/1000/1000/nightlife/3'], ['background' => 'http://lorempixel.com/1000/1000/nightlife/4'], ['background' => 'http://lorempixel.com/1000/1000/nightlife/5']], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION, Swiper::BEHAVIOUR_NEXT_BUTTON, Swiper::BEHAVIOUR_PREV_BUTTON], 'paginationOptions' => ['class' => 'swiper-pagination-white'], 'nextButtonOptions' => ['class' => 'swiper-button-white'], 'prevButtonOptions' => ['class' => 'swiper-button-white'], 'pluginOptions' => [Swiper::OPTION_SPACE_BETWEEN => 30, Swiper::OPTION_EFFECT => Swiper::EFFECT_FADE]]);
<?php /** * @var \yii\web\View $this */ use romkaChev\yii2\swiper\Swiper; echo Swiper::widget(['items' => ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9', 'Slide 10'], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION], 'pluginOptions' => [Swiper::OPTION_DIRECTION => Swiper::DIRECTION_VERTICAL, Swiper::OPTION_SLIDES_PER_VIEW => 1, Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_SPACE_BETWEEN => 30, Swiper::OPTION_MOUSEWHEEL_CONTROL => true]]);
<?php
/**
* @var \yii\web\View $this
*/
use romkaChev\yii2\swiper\Swiper;
use yii\helpers\Html;
use yii\web\JsExpression;
echo Swiper::widget(['items' => [['content' => Swiper::widget(['items' => [['content' => [Html::tag('div', 'Slide 1', ['class' => 'title', 'data' => ['swiper-parallax' => -100]]), Html::tag('div', 'Subtitle 1', ['class' => 'subtitle', 'data' => ['swiper-parallax' => -200]]), Html::tag('div', '<p>Text 1</p>', ['class' => 'text', 'data' => ['swiper-parallax' => -300]])], 'hash' => 'slide01-01'], ['content' => [Html::tag('div', 'Slide 2', ['class' => 'title', 'data' => ['swiper-parallax' => -100]]), Html::tag('div', 'Subtitle 2', ['class' => 'subtitle', 'data' => ['swiper-parallax' => -200]]), Html::tag('div', '<p>Text 2</p>', ['class' => 'text', 'data' => ['swiper-parallax' => -300]])], 'hash' => 'slide01-02'], ['content' => [Html::tag('div', 'Slide 3', ['class' => 'title', 'data' => ['swiper-parallax' => -100]]), Html::tag('div', 'Subtitle 3', ['class' => 'subtitle', 'data' => ['swiper-parallax' => -200]]), Html::tag('div', '<p>Text 3</p>', ['class' => 'text', 'data' => ['swiper-parallax' => -300]])], 'hash' => 'slide01-03']], 'behaviours' => [Swiper::BEHAVIOUR_PARALLAX], 'parallaxOptions' => [Swiper::PARALLAX_BACKGROUND => 'http://lorempixel.com/1920/1080/nature/1/', Swiper::PARALLAX_TRANSITION_X => '-23%', Swiper::PARALLAX_DURATION => 500, 'class' => 'my-parallax-class'], 'pluginOptions' => [Swiper::OPTION_HASHNAV => true, Swiper::OPTION_PARALLAX => true, Swiper::OPTION_KEYBOARD_CONTROL => true, Swiper::OPTION_DIRECTION => Swiper::DIRECTION_VERTICAL]]), 'hash' => 'slide01'], ['content' => Swiper::widget(['items' => [['content' => [Html::tag('div', 'Slide 1', ['class' => 'title', 'data' => ['swiper-parallax' => -100]]), Html::tag('div', 'Subtitle 1', ['class' => 'subtitle', 'data' => ['swiper-parallax' => -200]]), Html::tag('div', '<p>Text 1</p>', ['class' => 'text', 'data' => ['swiper-parallax' => -300]])]], ['content' => [Html::tag('div', 'Slide 2', ['class' => 'title', 'data' => ['swiper-parallax' => -100]]), Html::tag('div', 'Subtitle 2', ['class' => 'subtitle', 'data' => ['swiper-parallax' => -200]]), Html::tag('div', '<p>Text 2</p>', ['class' => 'text', 'data' => ['swiper-parallax' => -300]])]], ['content' => [Html::tag('div', 'Slide 3', ['class' => 'title', 'data' => ['swiper-parallax' => -100]]), Html::tag('div', 'Subtitle 3', ['class' => 'subtitle', 'data' => ['swiper-parallax' => -200]]), Html::tag('div', '<p>Text 3</p>', ['class' => 'text', 'data' => ['swiper-parallax' => -300]])]]], 'behaviours' => [Swiper::BEHAVIOUR_PARALLAX, Swiper::BEHAVIOUR_RTL], 'parallaxOptions' => [Swiper::PARALLAX_BACKGROUND => 'http://lorempixel.com/1920/1080/nature/2/', Swiper::PARALLAX_TRANSITION_Y => '-23%', Swiper::PARALLAX_DURATION => 450], 'paginationOptions' => ['class' => 'swiper-pagination-white'], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_PARALLAX => true, Swiper::OPTION_KEYBOARD_CONTROL => true]]), 'hash' => 'slide02'], ['content' => Swiper::widget(['items' => [['content' => [Html::tag('div', 'Slide 1', ['class' => 'title', 'data' => ['swiper-parallax' => -100]]), Html::tag('div', 'Subtitle 1', ['class' => 'subtitle', 'data' => ['swiper-parallax' => -200]]), Html::tag('div', '<p>Text 1</p>', ['class' => 'text', 'data' => ['swiper-parallax' => -300]])]], ['content' => [Html::tag('div', 'Slide 2', ['class' => 'title', 'data' => ['swiper-parallax' => -100]]), Html::tag('div', 'Subtitle 2', ['class' => 'subtitle', 'data' => ['swiper-parallax' => -200]]), Html::tag('div', '<p>Text 2</p>', ['class' => 'text', 'data' => ['swiper-parallax' => -300]])]], ['content' => [Html::tag('div', 'Slide 3', ['class' => 'title', 'data' => ['swiper-parallax' => -100]]), Html::tag('div', 'Subtitle 3', ['class' => 'subtitle', 'data' => ['swiper-parallax' => -200]]), Html::tag('div', '<p>Text 3</p>', ['class' => 'text', 'data' => ['swiper-parallax' => -300]])]]], 'behaviours' => [Swiper::BEHAVIOUR_PARALLAX], 'parallaxOptions' => [Swiper::PARALLAX_BACKGROUND => 'http://lorempixel.com/1920/1080/nature/3/', Swiper::PARALLAX_TRANSITION => '-23%', Swiper::PARALLAX_DURATION => 350], 'paginationOptions' => ['class' => 'swiper-pagination-white'], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_PARALLAX => true, Swiper::OPTION_KEYBOARD_CONTROL => true]]), 'hash' => 'slide03']], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION, Swiper::BEHAVIOUR_NEXT_BUTTON, Swiper::BEHAVIOUR_PREV_BUTTON], 'nextButtonOptions' => ['class' => 'swiper-button-white'], 'paginationOptions' => ['class' => 'swiper-pagination-white'], 'wrapperOptions' => ['class' => 'my-wrapper-class'], 'pluginOptions' => [Swiper::OPTION_LOOP => true, Swiper::OPTION_HASHNAV => true, Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_SPACE_BETWEEN => 50, Swiper::OPTION_ON_INIT => new JsExpression('function(){console.log("Swiper::OPTION_ON_INIT")}'), Swiper::OPTION_ON_SLIDE_CHANGE_START => new JsExpression('function(){console.log("Swiper::OPTION_ON_SLIDE_CHANGE_START")}'), Swiper::OPTION_ON_SLIDE_CHANGE_END => new JsExpression('function(){console.log("Swiper::OPTION_ON_SLIDE_CHANGE_END")}'), Swiper::OPTION_ON_TRANSITION_START => new JsExpression('function(){console.log("Swiper::OPTION_ON_TRANSITION_START")}'), Swiper::OPTION_ON_TRANSITION_END => new JsExpression('function(){console.log("Swiper::OPTION_ON_TRANSITION_END")}'), Swiper::OPTION_ON_TOUCH_START => new JsExpression('function(){console.log("Swiper::OPTION_ON_TOUCH_START")}'), Swiper::OPTION_ON_TOUCH_MOVE => new JsExpression('function(){console.log("Swiper::OPTION_ON_TOUCH_MOVE")}'), Swiper::OPTION_ON_TOUCH_MOVE_OPPOSITE => new JsExpression('function(){console.log("Swiper::OPTION_ON_TOUCH_MOVE_OPPOSITE")}'), Swiper::OPTION_ON_SLIDER_MOVE => new JsExpression('function(){console.log("Swiper::OPTION_ON_SLIDER_MOVE")}'), Swiper::OPTION_ON_TOUCH_END => new JsExpression('function(){console.log("Swiper::OPTION_ON_TOUCH_END")}'), Swiper::OPTION_ON_CLICK => new JsExpression('function(){console.log("Swiper::OPTION_ON_CLICK")}'), Swiper::OPTION_ON_TAP => new JsExpression('function(){console.log("Swiper::OPTION_ON_TAP")}'), Swiper::OPTION_ON_DOUBLE_TAP => new JsExpression('function(){console.log("Swiper::OPTION_ON_DOUBLE_TAP")}'), Swiper::OPTION_ON_IMAGES_READY => new JsExpression('function(){console.log("Swiper::OPTION_ON_IMAGES_READY")}'), Swiper::OPTION_ON_PROGRESS => new JsExpression('function(){console.log("Swiper::OPTION_ON_PROGRESS")}'), Swiper::OPTION_ON_REACH_BEGINNING => new JsExpression('function(){console.log("Swiper::OPTION_ON_REACH_BEGINNING")}'), Swiper::OPTION_ON_REACH_END => new JsExpression('function(){console.log("Swiper::OPTION_ON_REACH_END")}'), Swiper::OPTION_ON_DESTROY => new JsExpression('function(){console.log("Swiper::OPTION_ON_DESTROY")}'), Swiper::OPTION_ON_SET_TRANSLATE => new JsExpression('function(){console.log("Swiper::OPTION_ON_SET_TRANSLATE")}'), Swiper::OPTION_ON_SET_TRANSITION => new JsExpression('function(){console.log("Swiper::OPTION_ON_SET_TRANSITION")}'), Swiper::OPTION_ON_AUTOPLAY_START => new JsExpression('function(){console.log("Swiper::OPTION_ON_AUTOPLAY_START")}'), Swiper::OPTION_ON_AUTOPLAY_STOP => new JsExpression('function(){console.log("Swiper::OPTION_ON_AUTOPLAY_STOP")}'), Swiper::OPTION_ON_LAZY_IMAGE_LOAD => new JsExpression('function(){console.log("Swiper::OPTION_ON_LAZY_IMAGE_LOAD")}'), Swiper::OPTION_ON_LAZY_IMAGE_READY => new JsExpression('function(){console.log("Swiper::OPTION_ON_LAZY_IMAGE_READY")}')]]);
<?php /** * @var \yii\web\View $this */ use romkaChev\yii2\swiper\Swiper; echo Swiper::widget(['items' => ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9', 'Slide 10'], 'itemOptions' => ['options' => ['tag' => 'div', 'class' => 'my-slide-class']]]);
<?php /** * @var \yii\web\View $this */ use romkaChev\yii2\swiper\Swiper; echo Swiper::widget(['items' => ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9', 'Slide 10'], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true]]);
<?php /** * @var \yii\web\View $this */ use romkaChev\yii2\swiper\Swiper; echo Swiper::widget(['items' => [['content' => 'Slide 01', 'hash' => 'slide01'], ['content' => 'Slide 02', 'hash' => 'slide02'], ['content' => 'Slide 03', 'hash' => 'slide03'], ['content' => 'Slide 04', 'hash' => 'slide04'], ['content' => 'Slide 05', 'hash' => 'slide05'], ['content' => 'Slide 06', 'hash' => 'slide06'], ['content' => 'Slide 07', 'hash' => 'slide07'], ['content' => 'Slide 08', 'hash' => 'slide08'], ['content' => 'Slide 09', 'hash' => 'slide09'], ['content' => 'Slide 10', 'hash' => 'slide10']], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION, Swiper::BEHAVIOUR_NEXT_BUTTON, Swiper::BEHAVIOUR_PREV_BUTTON], 'pluginOptions' => [Swiper::OPTION_SPACE_BETWEEN => 30, Swiper::OPTION_HASHNAV => true]]);
<?php /** * @var \yii\web\View $this */ use romkaChev\yii2\swiper\Swiper; echo Swiper::widget(['items' => ['Horizontal Slide 1', Swiper::widget(['items' => ['Vertical Slide 1', 'Vertical Slide 2', 'Vertical Slide 3', 'Vertical Slide 4', 'Vertical Slide 5'], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_DIRECTION => Swiper::DIRECTION_VERTICAL, Swiper::OPTION_SPACE_BETWEEN => 50]]), 'Horizontal Slide 3', 'Horizontal Slide 4'], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_SPACE_BETWEEN => 50]]);
<?php /** * @var \yii\web\View $this */ use romkaChev\yii2\swiper\Swiper; echo Swiper::widget(['items' => [['background' => 'http://lorempixel.com/600/600/nature/1'], ['background' => 'http://lorempixel.com/600/600/nature/2'], ['background' => 'http://lorempixel.com/600/600/nature/3'], ['background' => 'http://lorempixel.com/600/600/nature/4'], ['background' => 'http://lorempixel.com/600/600/nature/5'], ['background' => 'http://lorempixel.com/600/600/nature/6'], ['background' => 'http://lorempixel.com/600/600/nature/7'], ['background' => 'http://lorempixel.com/600/600/nature/8'], ['background' => 'http://lorempixel.com/600/600/nature/9'], ['background' => 'http://lorempixel.com/600/600/nature/10']], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION], 'pluginOptions' => [Swiper::OPTION_EFFECT => Swiper::EFFECT_COVERFLOW, Swiper::OPTION_GRAB_CURSOR => true, Swiper::OPTION_CENTERED_SLIDES => true, Swiper::OPTION_SLIDES_PER_VIEW => Swiper::SLIDES_PER_VIEW_AUTO, Swiper::OPTION_COVERFLOW => [Swiper::OPTION_COVERFLOW_ROTATE => 50, Swiper::OPTION_COVERFLOW_STRETCH => 0, Swiper::OPTION_COVERFLOW_DEPTH => 100, Swiper::OPTION_COVERFLOW_MODIFIER => 1, Swiper::OPTION_COVERFLOW_SLIDE_SHADOWS => true]]]);
<?php
/**
* @var \yii\web\View $this
*/
use romkaChev\yii2\swiper\Swiper;
use yii\helpers\Html;
echo Swiper::widget(['items' => [['content' => [Html::tag('div', 'Slide 1', ['class' => 'title', 'data' => ['swiper-parallax' => -100]]), Html::tag('div', 'Subtitle 1', ['class' => 'subtitle', 'data' => ['swiper-parallax' => -200]]), Html::tag('div', '<p>Text 1</p>', ['class' => 'text', 'data' => ['swiper-parallax' => -300]])]], ['content' => [Html::tag('div', 'Slide 2', ['class' => 'title', 'data' => ['swiper-parallax' => -100]]), Html::tag('div', 'Subtitle 2', ['class' => 'subtitle', 'data' => ['swiper-parallax' => -200]]), Html::tag('div', '<p>Text 2</p>', ['class' => 'text', 'data' => ['swiper-parallax' => -300]])]], ['content' => [Html::tag('div', 'Slide 3', ['class' => 'title', 'data' => ['swiper-parallax' => -100]]), Html::tag('div', 'Subtitle 3', ['class' => 'subtitle', 'data' => ['swiper-parallax' => -200]]), Html::tag('div', '<p>Text 3</p>', ['class' => 'text', 'data' => ['swiper-parallax' => -300]])]]], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION, Swiper::BEHAVIOUR_NEXT_BUTTON, Swiper::BEHAVIOUR_PREV_BUTTON, Swiper::BEHAVIOUR_PARALLAX], 'parallaxOptions' => [Swiper::PARALLAX_BACKGROUND => 'http://lorempixel.com/900/600/nightlife/2/', Swiper::PARALLAX_TRANSITION => '-23%'], 'paginationOptions' => ['class' => 'swiper-pagination-white'], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_PARALLAX => true]]);
<?php
/**
* @var \yii\web\View $this
*/
use romkaChev\yii2\swiper\Swiper;
$swiperId = "my-swiper-id";
echo Swiper::widget(['items' => ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION, Swiper::BEHAVIOUR_NEXT_BUTTON, Swiper::BEHAVIOUR_PREV_BUTTON], 'containerOptions' => ['id' => $swiperId], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_SPACE_BETWEEN => 30, Swiper::OPTION_CENTERED_SLIDES => true, Swiper::OPTION_AUTOPLAY => 2500, Swiper::OPTION_AUTOPLAY_DISABLE_ON_INTERACTION => false]]);
?>
<p class = "append-buttons">
<a href = "#" class = "prepend-2-slides">Prepend 2 Slides</a>
<a href = "#" class = "prepend-slide">Prepend Slide</a>
<a href = "#" class = "append-slide">Append Slide</a>
<a href = "#" class = "append-2-slides">Append 2 Slides</a>
</p>
<?php
$this->registerJs(<<<JS
var appendNumber = 4;
var prependNumber = 1;
var swiper = jQuery('#{$swiperId}')[0].swiper;
document.querySelector( '.prepend-2-slides' ).addEventListener( 'click', function ( e ) {
e.preventDefault();
swiper.prependSlide( [
'<div class="swiper-slide">Slide ' + (-- prependNumber) + '</div>', '<div class="swiper-slide">Slide ' + (-- prependNumber) + '</div>'
] );
} );
document.querySelector( '.prepend-slide' ).addEventListener( 'click', function ( e ) {
<?php /** * @var \yii\web\View $this */ use romkaChev\yii2\swiper\Swiper; echo Swiper::widget(['items' => ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9', 'Slide 10'], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION], 'containerOptions' => ['class' => 'swiper1'], 'paginationOptions' => ['class' => 'swiper-pagination1'], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_SPACE_BETWEEN => 30]]); echo Swiper::widget(['items' => ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9', 'Slide 10'], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION], 'containerOptions' => ['class' => 'swiper2'], 'paginationOptions' => ['class' => 'swiper-pagination2'], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_SPACE_BETWEEN => 30]]); echo Swiper::widget(['items' => ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9', 'Slide 10'], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION], 'containerOptions' => ['class' => 'swiper3'], 'paginationOptions' => ['class' => 'swiper-pagination3'], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_SPACE_BETWEEN => 30]]);
<?php
/**
* @var \yii\web\View $this
*/
use romkaChev\yii2\swiper\Swiper;
use yii\helpers\Html;
echo Swiper::widget(['items' => [['content' => [Html::tag('img', '', ['class' => 'swiper-lazy', 'data' => ['src' => 'http://lorempixel.com/1600/1200/nature/1']]), Html::tag('div', '', ['class' => 'swiper-lazy-preloader swiper-lazy-preloader-white'])]], ['content' => [Html::tag('img', '', ['class' => 'swiper-lazy', 'data' => ['src' => 'http://lorempixel.com/1600/1200/nature/2']]), Html::tag('div', '', ['class' => 'swiper-lazy-preloader swiper-lazy-preloader-white'])]], ['content' => [Html::tag('img', '', ['class' => 'swiper-lazy', 'data' => ['src' => 'http://lorempixel.com/1600/1200/nature/3']]), Html::tag('div', '', ['class' => 'swiper-lazy-preloader swiper-lazy-preloader-white'])]], ['content' => [Html::tag('img', '', ['class' => 'swiper-lazy', 'data' => ['src' => 'http://lorempixel.com/1600/1200/nature/4']]), Html::tag('div', '', ['class' => 'swiper-lazy-preloader swiper-lazy-preloader-white'])]], ['content' => [Html::tag('img', '', ['class' => 'swiper-lazy', 'data' => ['src' => 'http://lorempixel.com/1600/1200/nature/5']]), Html::tag('div', '', ['class' => 'swiper-lazy-preloader swiper-lazy-preloader-white'])]], ['content' => [Html::tag('img', '', ['class' => 'swiper-lazy', 'data' => ['src' => 'http://lorempixel.com/1600/1200/nature/6']]), Html::tag('div', '', ['class' => 'swiper-lazy-preloader swiper-lazy-preloader-white'])]]], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION, Swiper::BEHAVIOUR_NEXT_BUTTON, Swiper::BEHAVIOUR_PREV_BUTTON], 'nextButtonOptions' => ['class' => 'swiper-button-white'], 'prevButtonOptions' => ['class' => 'swiper-button-white'], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_PRELOAD_IMAGES => false, Swiper::OPTION_LAZY_LOADING => true]]);
<?php
/**
* @var \yii\web\View $this
*/
use romkaChev\yii2\swiper\Swiper;
use yii\web\JsExpression;
echo Swiper::widget(['items' => ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9', 'Slide 10'], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_PAGINATION_BULLET_RENDER => new JsExpression(<<<JS
(function ( index, className ) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
})
JS
)]]);
<?php
/**
* @var \yii\web\View $this
*/
use romkaChev\yii2\swiper\Swiper;
use yii\helpers\Html;
/** @noinspection SpellCheckingInspection */
echo Swiper::widget(['items' => [['content' => [Html::tag('h4', 'Scroll Container'), Html::tag('p', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus, ex eu sagittis faucibus, ligula ipsum sagittis magna, et imperdiet dolor lectus eu libero. Vestibulum venenatis eget turpis sed faucibus. Maecenas in ullamcorper orci, eu ullamcorper sem. Etiam elit ante, luctus non ante sit amet, sodales vulputate odio. Aenean tristique nisl tellus, sit amet fringilla nisl volutpat cursus. Quisque dignissim lectus ac nunc consectetur mattis. Proin vel hendrerit ipsum, et lobortis dolor. Vestibulum convallis, nibh et tincidunt tristique, nisl risus facilisis lectus, ut interdum orci nisl ac nunc. Cras et aliquam felis. Quisque vel ipsum at elit sodales posuere eget non est. Fusce convallis vestibulum dolor non volutpat. Vivamus vestibulum quam ut ultricies pretium.'), Html::tag('p', 'Suspendisse rhoncus fringilla nisl. Mauris eget lorem ac urna consectetur convallis non vel mi. Donec libero dolor, volutpat ut urna sit amet, aliquet molestie purus. Phasellus faucibus, leo vel scelerisque lobortis, ipsum leo sollicitudin metus, eget sagittis ante orci eu ipsum. Nulla ac mauris eu risus sagittis scelerisque iaculis bibendum mauris. Cras ut egestas orci. Cras odio risus, sagittis ut nunc vitae, aliquam consectetur purus. Vivamus ornare nunc vel tellus facilisis, quis dictum elit tincidunt. Donec accumsan nisi at laoreet sodales. Cras at ullamcorper massa. Maecenas at facilisis ex. Nam mollis dignissim purus id efficitur.'), Html::tag('p', 'Curabitur eget aliquam erat. Curabitur a neque vitae purus volutpat elementum. Vivamus quis vestibulum leo, efficitur ullamcorper velit. Integer tincidunt finibus metus vel porta. Mauris sed mauris congue, pretium est nec, malesuada purus. Nulla hendrerit consectetur arcu et lacinia. Suspendisse augue justo, convallis eget arcu in, pretium tempor ligula. Nullam vulputate tincidunt est ut ullamcorper.'), Html::tag('p', 'Curabitur sed sodales leo. Nulla facilisi. Etiam condimentum, nisi id tempor vulputate, nisi justo cursus justo, pellentesque condimentum diam arcu sit amet leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In placerat tellus a posuere vehicula. Donec diam massa, efficitur vitae mattis et, pretium in augue. Fusce iaculis mi quis ante venenatis, sit amet pellentesque orci aliquam. Vestibulum elementum posuere vehicula.'), Html::tag('p', 'Sed tincidunt diam a massa pharetra faucibus. Praesent condimentum id arcu nec fringilla. Maecenas faucibus, ante et venenatis interdum, erat mi eleifend dui, at convallis nisl est nec arcu. Duis vitae arcu rhoncus, faucibus magna ut, tempus metus. Cras in nibh sed ipsum consequat rhoncus. Proin fringilla nulla ut augue tempor fermentum. Nunc hendrerit non nisi vitae finibus. Donec eget ornare libero. Aliquam auctor erat enim, a semper risus semper at. In ut dui in metus tincidunt euismod eget et lacus. Aenean et dictum urna, sed rhoncus lorem. Duis pharetra sagittis odio. Etiam a libero ut nisi feugiat tincidunt vel vitae turpis. Maecenas vel orci sit amet lorem hendrerit venenatis sollicitudin ut dui. Quisque rhoncus nibh in massa pretium scelerisque.'), Html::tag('p', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus, ex eu sagittis faucibus, ligula ipsum sagittis magna, et imperdiet dolor lectus eu libero. Vestibulum venenatis eget turpis sed faucibus. Maecenas in ullamcorper orci, eu ullamcorper sem. Etiam elit ante, luctus non ante sit amet, sodales vulputate odio. Aenean tristique nisl tellus, sit amet fringilla nisl volutpat cursus. Quisque dignissim lectus ac nunc consectetur mattis. Proin vel hendrerit ipsum, et lobortis dolor. Vestibulum convallis, nibh et tincidunt tristique, nisl risus facilisis lectus, ut interdum orci nisl ac nunc. Cras et aliquam felis. Quisque vel ipsum at elit sodales posuere eget non est. Fusce convallis vestibulum dolor non volutpat. Vivamus vestibulum quam ut ultricies pretium.'), Html::tag('p', 'Suspendisse rhoncus fringilla nisl. Mauris eget lorem ac urna consectetur convallis non vel mi. Donec libero dolor, volutpat ut urna sit amet, aliquet molestie purus. Phasellus faucibus, leo vel scelerisque lobortis, ipsum leo sollicitudin metus, eget sagittis ante orci eu ipsum. Nulla ac mauris eu risus sagittis scelerisque iaculis bibendum mauris. Cras ut egestas orci. Cras odio risus, sagittis ut nunc vitae, aliquam consectetur purus. Vivamus ornare nunc vel tellus facilisis, quis dictum elit tincidunt. Donec accumsan nisi at laoreet sodales. Cras at ullamcorper massa. Maecenas at facilisis ex. Nam mollis dignissim purus id efficitur.'), Html::tag('p', 'Curabitur eget aliquam erat. Curabitur a neque vitae purus volutpat elementum. Vivamus quis vestibulum leo, efficitur ullamcorper velit. Integer tincidunt finibus metus vel porta. Mauris sed mauris congue, pretium est nec, malesuada purus. Nulla hendrerit consectetur arcu et lacinia. Suspendisse augue justo, convallis eget arcu in, pretium tempor ligula. Nullam vulputate tincidunt est ut ullamcorper.'), Html::tag('p', 'Curabitur sed sodales leo. Nulla facilisi. Etiam condimentum, nisi id tempor vulputate, nisi justo cursus justo, pellentesque condimentum diam arcu sit amet leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In placerat tellus a posuere vehicula. Donec diam massa, efficitur vitae mattis et, pretium in augue. Fusce iaculis mi quis ante venenatis, sit amet pellentesque orci aliquam. Vestibulum elementum posuere vehicula.'), Html::tag('p', 'Sed tincidunt diam a massa pharetra faucibus. Praesent condimentum id arcu nec fringilla. Maecenas faucibus, ante et venenatis interdum, erat mi eleifend dui, at convallis nisl est nec arcu. Duis vitae arcu rhoncus, faucibus magna ut, tempus metus. Cras in nibh sed ipsum consequat rhoncus. Proin fringilla nulla ut augue tempor fermentum. Nunc hendrerit non nisi vitae finibus. Donec eget ornare libero. Aliquam auctor erat enim, a semper risus semper at. In ut dui in metus tincidunt euismod eget et lacus. Aenean et dictum urna, sed rhoncus lorem. Duis pharetra sagittis odio. Etiam a libero ut nisi feugiat tincidunt vel vitae turpis. Maecenas vel orci sit amet lorem hendrerit venenatis sollicitudin ut dui. Quisque rhoncus nibh in massa pretium scelerisque.')]]], 'behaviours' => [Swiper::BEHAVIOUR_SCROLLBAR], 'pluginOptions' => [Swiper::OPTION_DIRECTION => Swiper::DIRECTION_VERTICAL, Swiper::OPTION_SLIDES_PER_VIEW => Swiper::SLIDES_PER_VIEW_AUTO, Swiper::OPTION_MOUSEWHEEL_CONTROL => true, Swiper::OPTION_FREE_MODE => true]]);
<?php
/**
* @var \yii\web\View $this
*/
use romkaChev\yii2\swiper\Swiper;
$galleryTopId = 'gallery-top';
$galleryThumbsId = 'gallery-thumbs';
echo Swiper::widget(['items' => [['background' => 'http://lorempixel.com/1200/1200/nature/1'], ['background' => 'http://lorempixel.com/1200/1200/nature/2'], ['background' => 'http://lorempixel.com/1200/1200/nature/3'], ['background' => 'http://lorempixel.com/1200/1200/nature/4'], ['background' => 'http://lorempixel.com/1200/1200/nature/5'], ['background' => 'http://lorempixel.com/1200/1200/nature/6'], ['background' => 'http://lorempixel.com/1200/1200/nature/7'], ['background' => 'http://lorempixel.com/1200/1200/nature/8'], ['background' => 'http://lorempixel.com/1200/1200/nature/9'], ['background' => 'http://lorempixel.com/1200/1200/nature/10']], 'behaviours' => [Swiper::BEHAVIOUR_NEXT_BUTTON, Swiper::BEHAVIOUR_PREV_BUTTON], 'containerOptions' => ['id' => $galleryTopId, 'class' => 'gallery-top'], 'nextButtonOptions' => ['class' => 'swiper-button-white'], 'prevButtonOptions' => ['class' => 'swiper-button-white'], 'pluginOptions' => [Swiper::OPTION_SPACE_BETWEEN => 10]]);
echo Swiper::widget(['items' => [['background' => 'http://lorempixel.com/1200/1200/nature/1'], ['background' => 'http://lorempixel.com/1200/1200/nature/2'], ['background' => 'http://lorempixel.com/1200/1200/nature/3'], ['background' => 'http://lorempixel.com/1200/1200/nature/4'], ['background' => 'http://lorempixel.com/1200/1200/nature/5'], ['background' => 'http://lorempixel.com/1200/1200/nature/6'], ['background' => 'http://lorempixel.com/1200/1200/nature/7'], ['background' => 'http://lorempixel.com/1200/1200/nature/8'], ['background' => 'http://lorempixel.com/1200/1200/nature/9'], ['background' => 'http://lorempixel.com/1200/1200/nature/10']], 'containerOptions' => ['id' => $galleryThumbsId, 'class' => 'gallery-thumbs'], 'pluginOptions' => [Swiper::OPTION_SPACE_BETWEEN => 10, Swiper::OPTION_CENTERED_SLIDES => true, Swiper::OPTION_SLIDES_PER_VIEW => Swiper::SLIDES_PER_VIEW_AUTO, Swiper::OPTION_TOUCH_RATIO => 0.2, Swiper::OPTION_SLIDE_TO_CLICKED_SLIDE => true]]);
$this->registerJs(<<<JS
//noinspection JSJQueryEfficiency
var galleryTop = jQuery( "#{$galleryTopId}" )[0].swiper;
//noinspection JSJQueryEfficiency
var galleryThumbs = jQuery( "#{$galleryThumbsId}" )[0].swiper;
galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;
JS
);
<?php /** * @var \yii\web\View $this */ use romkaChev\yii2\swiper\Swiper; echo Swiper::widget(['items' => [['background' => 'http://lorempixel.com/600/600/nature/1'], ['background' => 'http://lorempixel.com/600/600/nature/2'], ['background' => 'http://lorempixel.com/600/600/nature/3'], ['background' => 'http://lorempixel.com/600/600/nature/4'], ['background' => 'http://lorempixel.com/600/600/nature/5']], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION], 'pluginOptions' => [Swiper::OPTION_EFFECT => Swiper::EFFECT_CUBE, Swiper::OPTION_GRAB_CURSOR => true, Swiper::OPTION_CUBE => [Swiper::OPTION_CUBE_SHADOW => true, Swiper::OPTION_CUBE_SLIDE_SHADOWS => true, Swiper::OPTION_CUBE_SHADOW_OFFSET => 20, Swiper::OPTION_CUBE_SHADOW_SCALE => 0.9399999999999999]]]);
<?php
/**
* @var \yii\web\View $this
*/
use romkaChev\yii2\swiper\Swiper;
echo Swiper::widget(['items' => ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9', 'Slide 10'], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION, Swiper::BEHAVIOUR_NEXT_BUTTON, Swiper::BEHAVIOUR_PREV_BUTTON], 'nextButtonOptions' => ['class' => 'swiper-button-white'], 'prevButtonOptions' => ['class' => 'swiper-button-white'], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true, 'debugger' => true]]);
$this->registerJs(<<<JS
//noinspection ReservedWordAsName
Swiper.prototype.plugins.debugger = function ( swiper, params ) {
if (! params) {
return;
}
// Need to return object with properties that names are the same as callbacks
//noinspection JSUnusedLocalSymbols
return {
onInit : function ( swiper ) {
console.log( 'onInit' );
},
onClick : function ( swiper, e ) {
console.log( 'onClick' );
},
onTap : function ( swiper, e ) {
console.log( 'onTap' );
},
onDoubleTap : function ( swiper, e ) {
console.log( 'onDoubleTap' );
},
onSliderMove : function ( swiper, e ) {
console.log( 'onSliderMove' );
},
<?php /** * @var \yii\web\View $this */ use romkaChev\yii2\swiper\Swiper; echo Swiper::widget(['items' => ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9', 'Slide 10'], 'behaviours' => [Swiper::BEHAVIOUR_PAGINATION], 'pluginOptions' => [Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_SPACE_BETWEEN => 30, Swiper::OPTION_SLIDES_PER_VIEW => 4, Swiper::OPTION_CENTERED_SLIDES => true]]);
<?php /** * @var \yii\web\View $this */ use romkaChev\yii2\swiper\Swiper; echo Swiper::widget(['items' => ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9', 'Slide 10'], 'behaviours' => [Swiper::BEHAVIOUR_SCROLLBAR], 'scrollbarOptions' => ['class' => 'my-custom-scrollbar-class'], 'pluginOptions' => [Swiper::OPTION_SCROLLBAR_HIDE => true, Swiper::OPTION_SLIDES_PER_VIEW => Swiper::SLIDES_PER_VIEW_AUTO, Swiper::OPTION_CENTERED_SLIDES => true, Swiper::OPTION_PAGINATION_CLICKABLE => true, Swiper::OPTION_SPACE_BETWEEN => 30, Swiper::OPTION_GRAB_CURSOR => true]]);