Takafumi Higa Swiperとは、JQueryのライブラリーに依存せず、JavaScriptで動くカルーセルスライダーが
簡単に設置できるライブラリーです。
簡単に設置できるうえ、機能も多いのでぜひ使えると開発が楽になると思います。
今回は、CDNでの実装になります。
↓CDNについて詳しく知りたい方は下記のサイトを御覧ください。
https://www.kagoya.jp/howto/network/cdn/
１、JavaScriptのファイルを作成します
①今回はscript.jsというファイル名です。名前は任意で大丈夫です。
２、下記のスワイパーのサイトにアクセス
①Get startedをクリックして移動
②min.CSSとmin.jsをコピーして<head>タグの中に貼り付けます。
３，<head></head>内にコピペする
①お使いのエディッタに戻ってコピペ
４，index.htmlファイルの表示したい場所にhtmlをコピペ
①Swiperのサイトに戻って「Add Swiper HTML Layout」に行って①をコピーする
②表示したい場所にコピペ。今回は<main></main>の中にします。
５、次はJavaScriptにコピペします
①Swiperのサイトに戻って 「Initialize Swiper」に行って①をコピー。
②script.jsファイルにペーストします。
６、一旦表示を確認します。
①表示が縦になっているのが分かります。
②script.jsのコードverticalを消します。
③横になりました。画像やスタイルを入れて行きます。
④imgタグでいれても良いのですが、今回はbackground-imageを使うので、htmlを書き換えます。
⑤style.cssに記述します。
７，表示して確認しましょう！
このようになってましたら、完了です。
swiperはたくさんのオプションがありますので、次回以降にご紹介していきたいと思います。
ありがとうございました。