freefuntimes今回はインジケーター部分を画像にしたSwiperスライダーを実装していく。ナビゲーション(画像両端の矢印)もつけた状態で対応する。前回の記事のソースをもとに対応していく。src="style.js"></script></body></html>前回の記事から変更したのは、下記部分である。スライダーを2つ作るという考え方で読み進めると理解しやすくなるかと思う。ちなみに下記の公式のdemoページを参考にして作成している。</div></div>ナビゲーション(画像両端の矢印)ありのスライダー部分これはこれまで通り作成するのだが、demoページと合わせて対応した方がわかりやすいと思うので、それに合わせた解説で進めていく。mySwiper2のクラス部分だ。今回はスライダーを2つ作っていく関係で、mySwiper2とmySwiperのクラスに分けて作成する必要がある。今回はナビゲーション(画像両端の矢印)ありのスライダー部分に対しては、mySwiper2というクラス名をつけている。あとの部分は前回と変わらないため、解説は省略する。インジケーター部分を画像にしたサムネイル部分こちらの実装はこれまでスライダーを作る工程と変わらない。この2つ目のスライダーについては、mySwiperのクラス名をつけることで、先ほど作成した「ナビゲーション(画像両端の矢印)ありのスライダー」と分けて使えるようになる。HTMLに関してはこれだけの対応でOK。10px;}CSSは下記部分を追記している。1;}例えばページ上で、「ナビゲーション(画像両端の矢印)ありのスライダー部分」の2枚目が表示されているようなとき、「インジケーター部分を画像にしたサムネイル部分」の2枚目が連動して表示されるように見せるための設定をしている。文字だとわかりにくいかもしれないので、下記に画像も貼るので参考にしてみてほしい。},})こちらは結構変更が入っているのでややこしくなるかもしれない。順を追って解説していく。true,})ここの記述部分は、「インジケーター部分を画像にしたサムネイル部分」のスライダーにあたる。下記に解説はしているが、公式ドキュメントもご覧になりたい方は下記ページも参考にするといいかと思う。APIspaceBetweenについてspaceBetweenで値を入れることで、画像と画像の間に余白をつけることができる。CSSで指定する必要もなくなる。今回は10の余白がつくように指定した。slidesPerViewについてslidesPerViewは値を指定すると、スライダーを表示させる幅の中にいくつの画像を表示させたいかの指定ができる。今回は4つ表示させている。watchSlidesProgresstrueにすることで、スライドの進行状況と可視性を計算することができる。今表示されているスライダー(オンになっているスライダー)に対して、クラスが付与されるようになる。},})HTML側でmySwiper2とクラス名をつけている関係で、constで定義する変数もswiper2にして、分けて作成するようにしている。下記部分が前回とは違う部分になるので解説していきたい。公式だと下記ページ部分にあたる。swiper,}thumbsにswiper:を指定すると、swiperのサムネイルを初期化するためのswiperパラメーターを持つオブジェクトとして使用できるようになる。翻訳しているのでわかりにくいかもしれないが、要は「インジケーター部分を画像にしたサムネイル部分」を「ナビゲーション(画像両端の矢印)ありのスライダー部分」として紐づけて使用できるようにするためにした記述だと思っていただけるとよいかと思う。指定先をswiperにしているが、これは先ほどconstでswiperと定義した下記の内容がそのまま入っているという認識でOKだ。true,})自分なりに読み解いて解説してみたが、間違いなどがあったら指摘いただければと思う。[...]コメントはクローズされています。(2)人気ブログランキングこのサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。