Carouselを手軽に導入できるSlick

Web サイトに Carousel を導入したいとき、jQuery などで一から作るのは面倒。

そんな私向けのモジュール Slick を使えば簡単です。

スポンサーリンク

Carousel

文字で説明するより見た方が早いので、デモページを見てください。

Slick

導入

ページ最上部のメニューで get it now を選択すると、Download Now ボタンが表示されます。

zip ファイルをダウンロードしたら、中身を見てみます。index.html を開くと、Carousel のデモが表示できます。

色々入っていますが、絶対に必要なのは slick フォルダ内の slick.css, slick-js だけです。見た目もそのままでいいなら、slick-theme.css と font フォルダも使います。

何も書き換えない状態では、以下のディレクトリ構成で動作します。

上と同じように、使いたいサイトに CSS, JavaScript, フォントフォルダを設置します。

使い方

まず、CSS  と JavaScript を読み込みます。

slick.css, slick-theme.css は head タグ内に設置しますが、slick.js と jQuery は body を閉じる直前で読み込みます。head タグ内に設置すると、Web サイトの読み込みに時間がかかるからです。

次に、HTML で Carousel にする要素を書き、JavaScript で動作内容を指定します。

Getting Started を見ると、わかりやすいです。

スポンサーリンク

コメント・質問する