回答編集履歴
1
vertical, Lazy Loadingについて追記・編集
answer
CHANGED
|
@@ -1,13 +1,20 @@
|
|
|
1
|
-
|
|
1
|
+
`jQuery`は書き換えてはいけないので、修正したのであれば元に戻してください。
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
詳細なオプションはドキュメントを確認して欲しいのですが、画像要素をカルーセルのようにするには`Lazy Loading`を使わなければならないそうです。HTMLの公式のサンプルは下記にありますので参考にしてください。
|
|
4
|
+
[http://idangero.us/swiper/api/#lazy](http://idangero.us/swiper/api/#lazy)
|
|
4
5
|
|
|
6
|
+
また、私もちゃんとドキュメントを読んでいませんでしたが、vertical指定時はちょっと特殊なようです。試してないので何とも言えませんが下記のようにしてみてください。
|
|
7
|
+
|
|
5
8
|
```js
|
|
6
9
|
var swiper = new Swiper('.swiper-container', {
|
|
7
10
|
direction: 'vertical',
|
|
8
11
|
speed: 600,
|
|
9
|
-
autoplay:200,
|
|
12
|
+
autoplay: {delay : 200}, //trueかオブジェクトを指定します
|
|
13
|
+
//loop: true, //← verticalには使えません
|
|
14
|
+
slidesPerView: 'auto', //vertical指定時のloop
|
|
15
|
+
watchSlidesVisibility: true, //slidePerView指定時はこれも指定する
|
|
16
|
+
preloadImages: false, //初期表示時にすべての画像を読み込まない
|
|
10
|
-
|
|
17
|
+
lazy: true
|
|
11
18
|
});
|
|
12
19
|
```
|
|
13
20
|
|