forked from romka-chev/yii2-swiper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path22-dynamic-slides.php
71 lines (63 loc) · 2.2 KB
/
22-dynamic-slides.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<?php
/**
* @var \yii\web\View $this
*/
use bestyii\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 ) {
e.preventDefault();
swiper.prependSlide( '<div class="swiper-slide">Slide ' + (-- prependNumber) + '</div>' );
} );
document.querySelector( '.append-slide' ).addEventListener( 'click', function ( e ) {
e.preventDefault();
swiper.appendSlide( '<div class="swiper-slide">Slide ' + (++ appendNumber) + '</div>' );
} );
document.querySelector( '.append-2-slides' ).addEventListener( 'click', function ( e ) {
e.preventDefault();
swiper.appendSlide( [
'<div class="swiper-slide">Slide ' + (++ appendNumber) + '</div>', '<div class="swiper-slide">Slide ' + (++ appendNumber) + '</div>'
] );
} );
JS
);