![](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/extra7/mainvisual-l.jpg)
【レイアウト構成】番外編:プラグイン「slick」/カルーセルスライダー
レイアウト構成
![サイト全体のレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/extra7/layout.jpg)
コーディングのヒント!
全体をdivタグで囲みます。
- スライダー画像
- スライダー用の全ての画像をul、liタグで記述します。
jQueryでスライダーの読み込みを行うために、ulタグにid名を指定しておきます。 - プラグイン「slick」の実行
- jsファイル内で、スライダー画像用のulタグに対してslick()関数を使用して実行します。ulタグにsliderというid名を使用した場合、「$(‘#slider’).slick();」となります。