【jQuery】slick()を使ってスライドショーを表示する!

指定した要素でスライドショーを表示するにはslick()を使用します。

slick()とは、指定した要素をスライドショーとして表示するメソッドであり、slickを使えば、文字や画像が切り替わるスライダーを簡単に作成することができます。
その為、ほとんどのWebサイトで使用され、画像のスライドショーをWebサイトに設置することでオシャレなサイトになります。

そして、slick()メソッドはたくさんのパラメータがありますので、自動でスライドを実行させたり、表示する要素の数を設定したりなど自分でスライドショーをカスタマイズすることも可能です。

また、slickのcssファイルを変更することで、スライドショーの矢印のデザインやドットのデザインなども変更できます。

Webサイトをもう少しオシャレにしたい場合や何か足りないと思った場合には、slick()メソッドを使ってスライドショーを表示してみましょう。

今回は、slick()を使ってスライドショーを表示する方法について以下の内容で解説していきます。

⚫︎ スライドショーを自動再生で行う場合
⚫︎ スライドショーでスライドするスピードを設定する場合
⚫︎ スライドショーにドット(ページ送り)を表示する場合
⚫︎ スライドショーのエリアで表示する要素を指定する場合
⚫︎ スライドショーで表示中の要素を中央へ設定する場合

⚫︎ スライドショーの矢印を変更する場合
⚫︎ スライドショーのドットを変更する場合

slick()とは

slick()とは、スライドショーを実行するメソッドとなります。

slick()の書き方

slick()の構文は下記となります。

パラメータ

⚫︎ オブション:
スライドショーのカスタマイズする為のオプションを設定する
⚫︎ :
スライドショーのカスタマイズする為オプションの値を設定する

slick()を呼び出すと、指定したセレクターの要素のスライドショーを実装させることができ、パラメータにオプションと値を指定することでスライドショーをカスタマイズすることができます。

また、slick()のパラメータの一覧は下記となります。

オプション 説明
accessibility true/ false 左右ボタンで画像の切り替えをできるかどうか
autoplay true/false 自動再生するかどうか。trueで自動再生される
autoplaySpeed ミリ秒 自動再生で切り替えをする時間をミリ秒で指定する
speed ミリ秒 自動再生や左右の矢印でスライドするスピードを指定
pauseOnHover true/false 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか
pauseOnDotsHover true/false 自動再生時にドットにマウスオンで一時停止するかどうか
cssEase ease、linear、ease-in、
ease-out、ease-in-out
切り替えのアニメーションを指定
dots true/false ドット(ページ送り)を表示するか/表示しないか
cssEase true/false 切り替えのアニメーションを指定
dotsClass “クラス名” ドットのclass名をつける
fade true/false 切り替え時にフェードインするか/しないか
draggable true/false ドラッグができるか/できないか
arrows true/false 左右の次へ、前へボタンを表示するか/しないか
infinite true/false 無限スクロールにするか/しないか
最後の画像の次は最初の画像が表示される
initialSlide インデックス 最初のスライダーの位置を指定(0がスタート)
pauseOnHover インデックス スライドのエリアにマウスオーバーしている間、自動再生を止めるか/止めないか
lazyLoad ‘ondemand’や’progressive’ 画像の遅延を表示する
slidesToShow インデックス スライドのエリアに画像がいくつ表示するかを指定
slidesToScroll インデックス 一度にスライドする数を指定
swipe true/false タッチスワイプに対応するか/しないか
vertical true/false 縦方向へのスライドをするか/しないか
centerMode true/false 表示中の画像を中央へ設定するか/しないか
centerPadding “数字px”や”数値%” 中央のpadding値を指定する

スライドショーを表示するサンプルコード

スライドショーを表示するサンプルコードを紹介していきます。

しかし、slick()はjsで準備されているメソッドではない為、そのままslick()を呼び出してもスライドショーは行われません。
使用するにはslickファイルをダウンロードする必要があり、slick()のjsファイルを指定する必要があります。

slickファイルのダウンロードや設置の方法ついてはこちらをご参考ください。

スライドショーを自動再生で行う場合

スライドショーを自動再生で行う場合は、slickのパラメータのautoplayにtrueを指定します。

sample.html

style.css

index.js

実行結果

autoplayをtrueに指定したことで自動でスライドショーが行われています。

スライドショーでスライドするスピードを設定する場合

スライドショーの自動再生で切り替えをする時間を設定する場合は、パラメータであるspeedにミリ秒を指定します。

sample.html

style.css

index.js

実行結果

sppedを指定したことで自動再生で切り替えをする時間を設定しています。
その為、3秒かけて切り替えが行われています。

スライドショーにドット(ページ送り)を表示する場合

スライドショーにドット(ページ送り)を表示する場合はパラメータであるdotにtrueを指定します。

sample.html

style.css

index.js

実行結果

dotsにtrueを指定することで、スライドショーにドット(ページ送り)を表示しています。

スライドショーのエリアで表示する要素数を指定する場合

スライドショーのエリアで表示する要素を指定する場合はパラメータであるslidesToShowにインデックスを指定します。

sample.html

style.css

index.js

実行結果

slidesToShowにインデックスを指定することで、スライドショーのエリアで表示する要素数を指定しています。

スライドショーで表示中の要素を中央へ設定する場合

スライドショーで表示中の要素を中央へ設定する場合はパラメータであるcenterModeにtrueを指定し、centerPaddingに数値を指定します。

sample.html

style.css

index.js

実行結果

centerModeにtrueを指定し、centerPaddingに数値を指定することでスライドショーで表示中の要素を中央へ設定しています。

スライドショーのデザインを変更する方法

スライドショーのデザインを変更する方法を紹介します。

スライドショーの矢印を変更する場合

スライドショーの矢印を変更するにはslick-theme.cssの「.slick-prev:before」と「.slick-next:before」のプロパティを変更します。

slick-theme.css

実行結果

「.slick-prev:before」と「.slick-next:before」のプロパティを変更することで、スライドショーの矢印を変更しています。

スライドショーのドットを変更する場合

スライドショーのドットを変更するにはslick-theme.cssの「.slick-dots li button:before」と「.slick-dots li.slick-active button:before」のプロパティを変更します。

conte

slick-theme.css

実行結果

.slick-dots li button:before」と「.slick-dots li.slick-active button:before」のプロパティを変更することで、スライドショーのドットを変更しています。

今回のポイント

slick()でスライドショーを表示

⚫︎ スライドショーを表示するにはslick()メソッドを使用する

⚫︎ slick()メソッドを使用するには、slickファイルをダウンロードして設置する必要がある

⚫︎ スライドショーを自動再生で行う場合はslick()のパラメータであるautoplayを指定する

⚫︎ スライドショーでスライドするスピードを設定する場合はslick()のパラメータであるspeedを指定する

⚫︎ スライドショーにドット(ページ送り)を表示する場合はslick()のパラメータであるdotsを指定する

⚫︎ スライドショーのエリアで表示する要素を指定する場合はslick()のパラメータであるslidesToShowを指定する

⚫︎ スライドショーで表示中の要素を中央へ設定する場合はslick()のパラメータであるcenterModecenterPaddingを指定する

⚫︎ スライドショーの矢印を変更する場合はslick-theme.cssの「.slick-prev:before」と「.slick-next:before」のプロパティを変更する

⚫︎ スライドショーのドットを変更する場合はslick-theme.cssの「.slick-dots li button:before」と「.slick-dots li.slick-active button:before」のプロパティを変更する

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し