DAY19:スライダー(カルーセル)を作る

スライダーを作っていきましょう。スライダーはカルーセルとも呼ばれたりします。

作ると言っても、ライブラリの使い方を覚えることと、そのライブラリをカスタマイズできればとりあえずはOKだと思います。

課題:メインビジュアルをスライダーに変更

DAY11あたりまでに作成したサイトのメインビジュアルをスライダーに変更します。

スライダーとなる場合は、以下のようにアローボタンやページネーションがデザインカンプ上に用意されるので、こういったカンプを見たら「あ、スライダーで実装するんだな」って判断します。(もちろんデザイナーさんに意図を聞いた方が確実です)

https://xd.adobe.com/spec/f78506a6-eb79-4ea8-6524-6855883c64eb-81b4/
※ パスワードはSlackの「#トライアル課題」にピン留めしています。
Slackへのグループ参加は東京フリーランスをご参考ください。

コーディング時点では、2枚目以降の画像がないことが結構多いです…。コーダー側で適当に同じようなサイズの仮の画像を用意して入れてあげましょう。先方が画像を差し替えたらいいだけの状態にして納品してあげてください。

扱いやすいスライダー系ライブラリを1つ持つ

スライダーは自作してもいいですが、先人の凄い人が作ってくれたライブラリーを使ったほうが、時間もかからずにいい感じに作ることができます。

色んなスライダー系のライブラリがありますが、ご自身が扱いやすいものを決めて、使い倒して見てください!
2018年も手軽で便利なjQueryスライダープラグイン9選|ferret [フェレット]

わたしは「Swiper」というスライダーを愛用しています。

【実例12パターン】画像スライダーはSwiper使っておけば間違いない!実用的な使い方を紹介

余裕があったら、、、

もう1パターンのスライダーを用意してみました。こちらも個人的にはよく出会うスライダーなので、余裕があれば作ってみてください!
https://xd.adobe.com/spec/4d17681d-ff99-4075-722c-95f82b2782fa-3b26/

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事