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

Author

トッド(Todd)

javascriptは難しい。

あぁ~難しい。

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

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

優しさなのか?

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

それ、面白い?

分かるよ。

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

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

興味、失せません?

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

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

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

Javascriptを使えば、
このようなスライダーを、
実装することが出来ます。

どうですか?

良い感じでしょ?

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

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

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







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

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

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

流し読みで良いよ~

STEP.1
導入準備
『Swiper』の公式サイトへアクセスします。そしたら、Get Startedを選択します。そこに書かれているCDNコードを自サイトのhead~/head間にコピペします。別途、1つはhead内。もう一方はbody内に同じくコピペします。
STEP.2
好きなスライダーを選択
「Swiper」には、豊富なデモがあります。そこから好みのレイアウトを見つけます。
STEP.3
コピペする
好みのレイアウトが見つかったら、そこからソースコードを見ることが出来るので、実装したい箇所へサンプルと同じように記述していきます。
STEP.4
オプションを触る
主に、これはカスタム機能でコレが分かりやすくて良いところ。
STEP.5
完成
ちゃんと動くか確認する。

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

STEP1.導入準備について

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

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

注意

以下で紹介しているソースコードの中に/4.x.x/と書かれているところがあります。

その部分は、Swiperの最新バージョンに合わせて書き換える必要があります。

2019年5月の時点では、バージョンVr4.5.0なので/4.5.0/と書き換える必要があることを忘れないでください。

head~/head間にコピペする

HTML
<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内)にコピペする

HTML
<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と記載されているところからアクセスすると豊富なサンプルを閲覧することが出来るので見て下さい。

参考 Swiper DemosSwiper

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

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

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

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

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

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

STEP4.オプションを触る

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

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

参考 「Swiper」CSSコードgithub



コメントを残す

メールアドレスが公開されることはありません。