見出し画像
Photo by sorude2501

初心者でも実装できた！スライド機能Swiperの使い方まとめ

Kazuki

今回はプログラミングで実際につまづいた内容を記事にまとめてみました。
1人でも多くの参考になれば幸いです。
なぜか複数のサイトを参考にしてもうまく出来ず、試行錯誤してなんとか自力で解決出来ました。しかし導入方法の結論はシンプルで

公式サイト通りに進める＋ブログを参考にする

です。以下を参考に進めてください。
バージョンアップが頻繁にあるので、基本的に公式サイトの手順に沿ってやります。（今回はCDNではなくファイルダウンロード形式）

初心者が一番？？？となりやすいのは、
導入部分のファイル読み込みのだと思います。（私がそうでした・・）
導入が終わればあとは簡単で、HTML/CSSの知識とJSファイルを少しいじるだけでJS初心者でも活用出来ます。

1a.

まずファイルのダウンロードですが公式トップページのダウンロードボタンから最新のバージョンをzip形式でダウンロードします。

スクリーンショット 2020-04-13 13.30.09

その後一番上にあるバージョン（数字の部分）をクリックし、zipファイルをダウンロード。
ダウンロード完了するとたくさんのファイルが出てきますが、必要なのは他の情報サイトにもあるように、
jsのswiper.min.js
cssのswiper.min.css
だけです。

2〜4.

公式サイトの通りに進めて行きます。
ファイルパスは当たり前ですが自分のファイルが反映されるようにしてください。

5.

おそらく手順の5でまた詰まります。
JSコードをHTMLの最後に記載しますが、手順通りだと縦スクロールや余分な機能が付いてしまうため、公式サイトのDEMOページから実装したい機能に合わせてコードを変更します。
例えばNavigationを実装したい場合、Source codeをクリックし
<!-- Initialize Swiper -->の部分を自分のHTMLファイルに記載します。

<!-- Initialize Swiper -->
 <script>
   var swiper = new Swiper('.swiper-container', {
     navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev',
     },
   });
 </script>

これで基本的なSwiperの設定は完了となります。

あとは実装したいデザインに合わせてHTMLやCSSを変更すれば、思った通りのスライダー画面が作成できるはずです。
多くのサイトでは、HTMLに画像を挿入していますが、画像に文字を含むスライダーの場合は、CSSのBackgroundに画像を挿入することで、文章を含む画像を挿入することが可能です。

お読みいただき、ありがとうございました！

参考URL

公式サイト

参考になったブログ記事。おそらく手順やコードが最新版と若干違います。



この記事が気に入ったらサポートをしてみませんか？