【レイアウト構成】番外編:プラグイン「slick」/カルーセルスライダー(カスタマイズ)

※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

レイアウト構成

サイト全体のレイアウト構成

コーディングのヒント!

全体をdivタグで囲みます。

スライダー画像
スライダー用の全ての画像をul、liタグで記述します。
jQueryでスライダーの読み込みを行うために、ulタグにid名を指定しておきます。
プラグイン「slick」の実行
jsファイル内で、スライダー画像用のulタグに対してslick()関数を使用して実行します。ulタグにsliderというid名を使用した場合、「$(‘#slider’).slick();」となります。
今回は、slickのカスタマイズを行いますので、slick()の括弧の中にオプションの設定を記述します。

コーディング練習メニューに戻る

関連記事

コーディング練習一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習