回答編集履歴

3

コードの修正

2016/02/04 08:06

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -50,7 +50,7 @@
50
50
 
51
51
 
52
52
 
53
- ```
53
+ ```JavaScript
54
54
 
55
55
  var $slider = $('.slider'),
56
56
 
@@ -58,7 +58,7 @@
58
58
 
59
59
 
60
60
 
61
- $slider.slick({
61
+ $slider.slick({
62
62
 
63
63
  slidesToShow: 1,
64
64
 
@@ -72,34 +72,22 @@
72
72
 
73
73
  fade: true
74
74
 
75
- });
75
+ }).on('afterChange', function() {
76
+
77
+ // 現在のスライド番号(最初は0)を取得。
78
+
79
+ var currentSlide = $slider.slick('slickCurrentSlide');
76
80
 
77
81
 
78
82
 
79
- var $sliderInner = $slider.find('.slick-slide');
83
+ // 最後のスライド番号と一致したら止める。
80
84
 
85
+ if(currentSlide === contentLength){
81
86
 
87
+ $slider.slick('slickPause');
82
88
 
83
- // .slick-slideのtransitionendのタイミングで毎回実行するようにイベントを設定。
89
+ }
84
90
 
85
- $sliderInner.on('transitionend', function(){
86
-
87
-  // 現在のスライド番号(最初は0)を取得。
88
-
89
- var currentSlide = $slider.slick('slickCurrentSlide');
90
-
91
-
92
-
93
-  // 現在の番号と、最後の番号を比較して、最後の番号だったらオートプレイを止める。
94
-
95
-  if(currentSlide === contentLength){
96
-
97
- $slider.slick('slickPause');
98
-
99
- }
100
-
101
- });
91
+ });
102
-
103
-
104
92
 
105
93
  ```

2

実際のコードサンプルを追加

2016/02/04 08:06

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -18,12 +18,6 @@
18
18
 
19
19
 
20
20
 
21
- 「slickPause」は、オートプレイを止めるメソッドです。
22
-
23
- 任意のタイミング(今回の場合は最後のスライドが表示されたタイミング)で使うようにJSを書けば良いと思います。
24
-
25
-
26
-
27
21
  ```JavaScript
28
22
 
29
23
  $('.slider').slick('slickPause');
@@ -31,3 +25,81 @@
31
25
 
32
26
 
33
27
  ```
28
+
29
+
30
+
31
+ 「slickPause」は、オートプレイを止めるメソッドです。
32
+
33
+ 任意のタイミング(今回の場合は最後のスライドが表示されたタイミング)で使うようにJSを書けば良いと思います。
34
+
35
+
36
+
37
+ ```HTML
38
+
39
+ <div class="slider">
40
+
41
+ <div>sample1</div>
42
+
43
+ <div>sample2</div>
44
+
45
+ <div>sample3</div>
46
+
47
+ </div>
48
+
49
+ ```
50
+
51
+
52
+
53
+ ```
54
+
55
+ var $slider = $('.slider'),
56
+
57
+ contentLength = $slider.children().length - 1; // .slider直下の要素の数を取得。0から始まるインデックス番号と合致させる為に1引く。この数は最後のスライド番号と同じになります。
58
+
59
+
60
+
61
+ $slider.slick({
62
+
63
+ slidesToShow: 1,
64
+
65
+ autoplay: true,
66
+
67
+ pauseOnHover: false,
68
+
69
+ autoplaySpeed: 2000,
70
+
71
+ arrows: false,
72
+
73
+ fade: true
74
+
75
+ });
76
+
77
+
78
+
79
+ var $sliderInner = $slider.find('.slick-slide');
80
+
81
+
82
+
83
+ // .slick-slideのtransitionendのタイミングで毎回実行するようにイベントを設定。
84
+
85
+ $sliderInner.on('transitionend', function(){
86
+
87
+  // 現在のスライド番号(最初は0)を取得。
88
+
89
+ var currentSlide = $slider.slick('slickCurrentSlide');
90
+
91
+
92
+
93
+  // 現在の番号と、最後の番号を比較して、最後の番号だったらオートプレイを止める。
94
+
95
+  if(currentSlide === contentLength){
96
+
97
+ $slider.slick('slickPause');
98
+
99
+ }
100
+
101
+ });
102
+
103
+
104
+
105
+ ```

1

加筆

2016/02/04 07:58

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -18,6 +18,12 @@
18
18
 
19
19
 
20
20
 
21
+ 「slickPause」は、オートプレイを止めるメソッドです。
22
+
23
+ 任意のタイミング(今回の場合は最後のスライドが表示されたタイミング)で使うようにJSを書けば良いと思います。
24
+
25
+
26
+
21
27
  ```JavaScript
22
28
 
23
29
  $('.slider').slick('slickPause');