319,165viewsこんにちは、デザイナーの奥田です。最近フロントエンドでは「脱jQuery」なんて言われていますね。jQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。今回は「もう最近の案件はこれしか使っていないんじゃないか?」というぐらい高機能で便利なスライダーをご紹介いたします。contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。SwiperCDNCSSとJSを読み込みます。src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script></body></html>.swiper-container以下に.swiper-wrapper、.swiper-slideを記述し、スクリプトを記述することで簡単にスライド表示することが可能です。class="swiper-button-next"></div></div>effectは”slide”,”fade”の他に”cube”や”flip”,”coverflow”などがあります。(※slidesPerViewなどで表示枚数を増やすと”slide”、”coverflow”以外は機能しません。'.swiper-button-prev',})以下にDemoを用意しています。Demoをみるカルーセル表示にする1枚ずつではなくカルーセル表示することも可能です。slidesPerViewにカルーセル表示したい枚数、spaceBetweenに間隔を指定し、centeredSlidesをtrueにするとセンター基準で表示できます。'.swiper-button-prev'})Demoをみるレスポンシブに対応するカルーセルの場合、レスポンシブのサイトでスマホ表示をすると画像が小さくなりすぎてしまいます。オプションに最大幅の指定とそれ以下での挙動を記述できます。PCでは2枚表示、スマホ以下では1枚のスライドになるようにした例が以下です。0}}})Demoを用意しました。ウィンドウを大きくしたり小さくしたりしてみてください。Demoをみる以下のような挙動になったとおもいます。PC表示スマホ表示PC時はグリッド表示、スマホ時にスライドにするPCではグリッド表示にしていてもスマホでは縦にずらーっと並んでしまう場合があります。そんな時、「スマホ時のみカルーセルにできたら・・・」と思う方も多いと思います。swiperでは以下のようにすることで対応できます。{swiperSlide[i].removeAttribute('style');}}}}initSwiper();window.addEventListener('resize',initSwiper);Demoをみる挙動としてはWindow幅が992以上のときはswiper.destroy();をし、余計なAttributeを削除します。991以下で2枚ずつのカルーセルに、767以下では1枚ずつのスライド表示になります。CSSで以下を記述することでグリッド表示にすることができます。none;}}サムネイル付きカルーセル表示カルーセル表示でサムネイルを表示したい場合は以下のようにします。></div></div></div>スライドを2つ用意し、同期させるようなイメージです。slider;Demoをみるその他オプションその他にも沢山のオプションがありますがよく使うであろうオプションをまとめておきました。ご参考にしてください。スライドの方向(’horizontal’が横、’vertical’で縦になります。スライドする際の速度1/1000秒で指定します。スライドを自動で動かす場合のオプション。1/1000秒で間隔を指定することで自動でスライドします。trueにすることでparallax(視差効果)を実装できます。等を指定することで可能になります。まとめいかがだったでしょうか。高機能なスライダーがjQueryなしで実装でき、レスポンシブにも柔軟に対応してくれる素晴らしいスライダーです。menuWorksBlogInformation。