【jQuery コーディング練習】番外編：プラグイン「slick」／カルーセルスライダー（カスタマイズ）

目次

• コーディング練習課題
  • 課題内容
  • 素材
  • デザインイメージ
  • コーディング仕様
• コーディングをはじめよう！
  • ①「模写コーディング」に挑戦する
    • デモサイト
    • コーディングのヒント（レイアウト構成）
    • コーディング例（ソースコード）
    • 参考（模写コーディングの手順）
  • ②「デザインカンプからのコーディング」に挑戦する
    • デザインカンプ
    • コーディングのヒント（レイアウト構成）
    • コーディング例（ソースコード、デモサイト）

コーディング練習課題

課題内容

プラグイン「slick」を使用してカルーセルスライダーを実装します。
オプション設定とCSSを変更してスライダーをカスタマイズしてみましょう。

素材

学習用の素材をダウンロードする
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています

デザインイメージ

▼PC表示

▼スマホ表示

コーディング仕様

コンテンツ幅

スライダーのコンテンツ幅は全幅です。

スライダー

下記の通り設定します。
・画像を3枚表示して、両端の2枚は見切れている状態にします。見切れている部分の横幅は18%に設定します。
・3秒ごとに自動で画像がスライドするようにします。（カーソルが画像上にのっている場合はスライドを停止します。）
・画像下にドット（ページ送り）を表示します。

レスポンシブ

ブレークポイントは900pxに設定します。
スマホ表示時は、画像の表示枚数を1枚にします。

プラグインの読み込み

以下のファイルを読み込みます。
・slick-theme.min.css
・slick.min.css
・slick.min.js

ファイルの読み込み方や使い方は、各自調べながら課題のスライダーを完成させてみてください。

コーディングをはじめよう！

コーディング練習は、下記の2つからお選びいただけます。

• ①模写コーディング：デモサイトを見ながら同じサイトを作る
• ②デザインカンプからのコーディング：デザインデータをもとにサイトを作る

①「模写コーディング」に挑戦する

デモサイトをもとに、模写コーディングに挑戦してみましょう！

②「デザインカンプからのコーディング」に挑戦する

デザインカンプからのコーディングに挑戦してみましょう！