30DAYSトライアル2nd

30DAYSトライアル2ndのまとめ【DAY20】

2nd DAY9の課題は「スライダー(カルーセル)を作る」になります。

DAY9DAY16で作成したXDデザインカンプからの模写結果にjQueryで動きをつけていきます。

まずは第1段としてメインビジュアルにスライダー(カルーセル)をつけていきます。

スライダー(カルーセル)とは

30DAYSトライアル2nd DAY20で実装するスライダー(カルーセル)は、メイン画像などが自動や手動で切り替わるやつですね。

以前レンタルWifiのブログ記事でも紹介した「どんなときもWiFi」のサイトなどがそうですね。




レイアウトの変更

30DAYSトライアル2nd DAY20で実装するスライダー(カルーセル)を実装するには、まずはメイン画像のレイアウトを変更する必要があります。

下記画像の赤丸で囲っている部分ですね。

ここで僕のレイアウトに問題が発生しました。

メイン画像を背景画像で実装していたんですが、スライダー化するためにはimg要素で作り直さないといけないということです。

もしかしたら背景画像のままでもいけたのかもしれませんが、僕にはその方法がパッと思いつかなかったのでしぶしぶimg要素で作りなおしました。

そして、レイアウトの変更点は「position」を使用して位置合わせをしてレイアウトの実装は完了です。

矢印はXDデザインカンプから画像をダウンロードしimg要素、画面下部の4つの丸はdiv要素で実装しています。

 




スライダー(カルーセル)の仕様

30DAYSトライアル2nd DAY20ではスライダー(カルーセル)の仕様は詳しく書かれていないので、とりあえず下記の仕様で作成しました。

  • 「<」をクリックすると一つ前の画像に切り替える
  • 先頭画像で「<」をクリックした場合は末尾画像に切り替える
  • 「>」をクリックすると一つ次の画像に切り替える
  • 末尾画像で「>」をクリックした場合は先頭画像に切り替える
  • 下部の「○」をクリックした場合は、「○」の順番に応じた画面に切り替える

これ以外でもProgateのように先頭画像を表示している時は「<」の非表示するなど、画像を一定時間で自動で切り替えるなど、仕様のパターンはありますが、一旦は上記でやりました。




スライダー(カルーセル)の実装

30DAYSトライアル2nd DAY20のメインであるスライダー(カルーセル)部分の実装です。

課題の記事ではライブラリを使用して実装できれば良いよと書かれていますが、僕はProgateが終わりたてだったということもあって、自作することにしました。

おすすめのスライダー(カルーセル)のライブラリ紹介の記事も掲載されています。

手軽で便利なjQueryスライダープラグイン9選

上記の記事、9つの中でも「Swiper」がオススメされてますね。

そでも僕は自作しました(別に自作したことが凄いわけでも、偉いわけでもありません)。

参考になるか分かりませんが、僕が自作したコードを載せておきます(だいぶProgateの影響をうけてます)

HTML

CSS(SASS)

jQuery

コードの概要
  1. スライドさせる画像には「slide」クラスをつける
  2. スライドさせる画像は「active」クラスがついたもののみを表示させる
  3. 「○」には「「index-btn」クラスをつける
  4. 「○」は「active」クラスがついたもののみ背景色を青色にする
  5. 「>」「<」「○」がクリックされたらスライド画像と「○」の「active」クラスを削除
  6. 「>」がクリックされたら「次の順番のものに「active」クラスをつける(末尾の場合は先頭)
  7. 「<」がクリックされたら「前の順番のものに「active」クラスをつける(末尾の場合は先頭)
  8. 「○」がクリックされたらクリックされたインデックスNoを取得し、そのインデックスNoの「slide」クラスと「index-btn」クラスに「active」クラスをつける

jQueryは共通化できる部分がありますが、とりあえず冗長的に書いています。




まとめ

今回はProgateを参考に自作してみましたが、手軽で便利なjQueryスライダープラグイン9選で紹介されているライブラリ、特に「Swiper」でも1度実装しておきたいですね。

そして、それをスニペットとして残して実際に使用する時にすぐに引き出せるようにしておけるようにするのも必須。

自作で作れると色々と幅が広がるとは思いますが、実装スピードを考えるとライブラリを利用しない手はありません。

でもやはり自作できるというのは基本を抑えられているということだと思うので、できるだけ自作から入り、その後にライブラリを活用していくという流れを作っていきます。

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す