回答編集履歴

1

vertical, Lazy Loadingについて追記・編集

2017/12/28 07:37

投稿

Tomak
Tomak

スコア1652

test CHANGED
@@ -1,8 +1,14 @@
1
- JavaScript一番最後カンマ`,`を取っみてください。
1
+ `jQuery`は書き換えてはいけないで、修正したであれば元に戻してください。
2
2
 
3
3
 
4
4
 
5
- あとJavaScriptエラーは開発者ツール(F12)ソーなど表示されるので、見てみてください。エラーが不可解な場足は質問文掲載してみてください。また、使用しているブラウザの種類やバージョンも重要な情報です。
5
+ 詳細なオプションはドキュメントを確認して欲しいのですが画像要素をカルーセルのようにするには`Lazy Loading`を使わなければならないそうです。HTML公式は下記ありますので参考にしてください。
6
+
7
+ [http://idangero.us/swiper/api/#lazy](http://idangero.us/swiper/api/#lazy)
8
+
9
+
10
+
11
+ また、私もちゃんとドキュメントを読んでいませんでしたが、vertical指定時はちょっと特殊なようです。試してないので何とも言えませんが下記のようにしてみてください。
6
12
 
7
13
 
8
14
 
@@ -14,9 +20,17 @@
14
20
 
15
21
  speed: 600,
16
22
 
17
- autoplay:200,
23
+ autoplay: {delay : 200}, //trueかオブジェクトを指定します
18
24
 
25
+ //loop: true, //← verticalには使えません
26
+
27
+ slidesPerView: 'auto', //vertical指定時のloop
28
+
29
+ watchSlidesVisibility: true, //slidePerView指定時はこれも指定する
30
+
31
+ preloadImages: false, //初期表示時にすべての画像を読み込まない
32
+
19
- loop: true
33
+ lazy: true
20
34
 
21
35
  });
22
36