『Swiper』を使いブログTOPページに「スライダー機能」を実装する／単語レベルで書き換えるだけでビジュアル機能は豊富

Author

トッド(Todd)

javascriptは難しい。

あぁ～難しい。

でも、”スライド機能”実装したい。

よくある「javascriptとは？」と書かれたものを見ると”動的”を説明する際、

優しさなのか？

（テキストが青から赤に変えられる。）とか（console.log（”こんにちは”））でコンソールに出力できました。って言います。

それ、面白い？

分かるよ。

入門的な説明をしているんだもの。

それぐらいじゃないと理解できないでしょ？・・・てきな。

興味、失せません？

だったら、もっともらしいモノを作って満足しよう！と思い、憧れの”スライド機能”を実装しました。

ここでは、噛み砕いて『どうやって”スライド機能”を実装したか？』について書いていきたいと思います。

まず、どういったモノを作れるのか？サンプルを用意しました。↓

どうですか？

良い感じでしょ？

サンプルなので、テキストをスライドさせている簡単なモノですが、画像やリンクを埋め込むこともできます。

このスライダーを作るのに、「Swiper」というjavascriptライブラリーを使用しました。

Swiper

すごく簡単に実装できるので興味のある人は試してみてよ。

「Swiper」の導入・実装までの流れ

ここでは、ファイルをダウンロードせずにCDN経由で導入・実装する方法を紹介しようと思います。

まずは、簡単な手順から・・・

流し読みで良いよ~

ここからは、各ステップを詳しく見ていきます。

STEP1.導入準備について

まずは、「Swiper」の情報を読み込むことが出来るように、それぞれのソースコードを特定の箇所にコピペしていきます。

Swiperの公式ページに進むと、Get Startedと記載されているところがあるのでアクセスしてもらうとCDNコードが確認できます。

head~/head間にコピペする

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">

<link rel="stylesheet" href="path/to/swiper.min.css">

実装したいページ（body内）にコピペする

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>

 <script src="path/to/swiper.min.js"></script>

これで導入準備は完了です。

STEP2.好みのスライダーを見つける

導入準備が終わると、あとは「Swiper」で遊ぶ感覚で楽しむことが出来ます。というのもデモが豊富に用意されているので、好みの仕様を選択するだけで実装が可能だという事です。

Swiperの公式ページにDemosと記載されているところからアクセスすると豊富なサンプルを閲覧することが出来るので見て下さい。

ちなみにですが、この記事でサンプルとして紹介している”スライド”の型は『Autoplay』というものです。

好みの仕様タイプが決まったら次のステップへ移行します。

STEP3.必要なところをコピペする

好みの仕様タイプが決まったら、そのデモ画面上に「ソースコード」と書かれた箇所があるのでアクセスします。

すると、このスライド仕様がどのようなコードで構成されているのか？を確認することが出来るので、その内必要なところだけ（CSS/HTML/javascript）をコピペします。

正しくコピペが出来ていればこの時点でサンプル通りに機能します。

STEP4.オプションを触る

この箇所はある程度のjavascript知識が必要でなのでこの記事では触れません。慣れるまではサンプルで遊ぶことをオススメします。

CSSを触ってカスタマイズできるところはあるのでまずはそっち方面から攻めましょう。