本記事では、Swiperの導入方法から基本的な記述を学べるだけでなく、多彩なレイアウトを実装できるようになります。
Swiperは、有名企業のWebサイトでも使われている高性能なJavascriptライブラリです。
カスタマイズ性も高いため、どんな案件にも使うことができます。
Swiperは自在に扱えるようになっておきましょう！！！
Swiperの導入方法と基本を学ぼう！
Swiperのレイアウトをカスタマイズする前に、まず使い方を学びましょう。
基本的な記述から、デフォルトで用意されている機能の実装方法を解説しています！
Webサイトでスライダーを使用すると、コンテンツを魅力的に見せることができます。 しかし、スライダーを自分で一から実装するのは難しく、手間がかかます。 そんな時に役立つのが「Swiper」というライブラリです。 Swip[…]
【Swiperの基本】シンプルで美しいスライダーを作成する方法！を読めば、下記のようなスライダーが簡単に作れるようになりますよ！
Swiperの基本中の基本！fadeスライド！
See the Pen 【swiper】エフェクト（fade） by 1buk1 (@1buk1) on CodePen.
スライドがキューブ状になってスライドする！cubeスライド！
See the Pen 【swiper】エフェクト（cube） by 1buk1 (@1buk1) on CodePen.
少し独特な３Dの動き！coverflowスライド！
See the Pen 【swiper】エフェクト（cube） by 1buk1 (@1buk1) on CodePen.
スライドがその場で回転しながらスライドする！flipスライド！
See the Pen 【swiper】エフェクト（） by 1buk1 (@1buk1) on CodePen.
上記は、あくまでも基本です。
応用は、次からご紹介します！
流れるような無限スクロールのスライドを作る！
Swiperを利用すると、一定速度で流れるようなスライドを作ることもできます。
See the Pen 【swiper】無限スクロール by 1buk1 (@1buk1) on CodePen.
作成方法は、【swiper】流れるような無限スクロールのスライドを作る方法！をご覧ください！
- 速度の調整
- スライド方向を逆に
上記のようなカスタマイズ方法も解説しています。
詳しくは、記事をご覧ください。
応用すれば、こんな感じのスライドも作ることができますよ！
See the Pen 【swiper】無限スクロール（左→右）２段以上 by 1buk1 (@1buk1) on CodePen.
「流れるような無限スクロールのスライドを作りたい！」そんなニーズに応えるSwiperの設定方法をご紹介します。 基本的なswiperの使い方は、【Swiperの基本】シンプルで美しいスライダーを作成する方法！書いてます。 [s[…]
2つのSwiperを連動させてサムネイル付きのスライダーを作る！
Swiperを２つ連動させて、１つをメインのスライダーに！２つめをサムネイル用のサブスライダーに設定しました。
ページネーションの代わりにサムネイル画像が下に表示されるので、どの画像をみているかだけでなく、全体の画像を一目で見ることができます。
ページ送りの矢印、サムネイル用の画像のどちらもクリックしてみてください。連動しているのが、お分かりいただけます！
See the Pen 【Swiper】サムネイルをつけて連動させる。（2つのスライダーを連動） by 1buk1 (@1buk1) on CodePen.
詳しくは、【Swiper】2つのSwiperを連動させてサムネイル付きのスライダーを作る方法！でをご覧ください。
基本を押さえた方なら、３０分前後で実装まで持っていける簡単な方法を紹介しています！
今回は、サムネイル付きのスライダーを作ったので、作り方をご紹介していきます！ タイトルにもあるように、Swiperを使っていきます！ Swiperの使い方が分からない方は、【Swiperの基本】シンプルで美し[…]
まとめ！
今後もSwiperは実践で使っていくと思いますので、新しいスライドを実装したら本記事にも掲載していこうと思います！
本記事をブックマークして、わからなくなったらまた見に来てくださると幸いです。