スライドが簡単に作れる～swiper~ | 長期有給インターン生の日常|株式会社ガーディアン | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー

みなさん、こんにちは！
京都事業所受託プロダクトチームインターン生の肖かえいです😆

本日、課題に取り組むうえで新たに「Swiper」について学びました！

このSwiperとは、簡単にWeb上でスライドショーが作れるJavascriptのプラグインのひとつです。

プラグインとは要するに拡張機能のことで、外部のプログラムによってさらに機能が追加されるというような感じです。

そのままのjavascriptでスライドショーを実装しようとするとめちゃくちゃ大変なのでこういうプラグインはとても助かりますね！

使い方は簡単で

導入(ローカルにダンロードもしくはCDN)⇒HTMLの設定⇒jsの設定

となっています。

HTMLにスライドショーにしたい該当部分を作り、jsで指定するという形です。

ここで注意するべきこととしてデフォルトで設定されている.swiper-wrapper と .swiper-slideというクラス名は変更してはいけないということです。

この部分は動かすスライド本体を指定する肝になります。

私はここを変更したことでスライドが動かず１時間ぐらい頭を抱えました。

まだ機能を理解できていないうちはとりあえずデフォルトで行うことは重要かもしれませんね！

---------------------------------------------------------------------------------------------
インターン募集ページ: https://guardian.jpn.com/recruit/intern/
メンバー紹介ページ：https://guardian.jpn.com/member/Xiao_Kaei/
---------------------------------------------------------------------------------------------