2018/05/30

jQueryスライダー[slick]が使いやすくておすすめ

簡単にスライダーを実装できるjQueryプラグインのslickが使いやすくて、簡単に実装できるので、使い方やカスタム方法を説明。

slickとは

slick(スリック)はカルーセルスライダーを実装できるjQeryプラグインで、高機能なのに実装がとても簡単なので使いやすく、さらにレスポンシブにも対応しているので、カスタマイズする必要がなく大変有能なプラグインです。

まずはデモサイトを作成したのでそちらを確認してください。

デモサイト

いかがでしょうか。jQeryスライダープラグインは他にもbxsliderなどさまざまな種類がありますが、個人的にはslickが機能的にも使い勝手が良くオススメです。

slickダウンロード

実装する為のダウンロード方法はとても簡単!

まずはjQeryを使用する為にjQery本体をダウンロード

slick自体のプラグインを公式サイトからダウンロード

slick.js

ロゴの下にあるget it nowを押すとボタンまで移動するのでDownload nowをクリックして、slickファイルをダウンロード

slick実装方法

読み込み

ダウンロードが完了したら、ファイルを実装したいHTMLに読み込みます。

cssとjsを読みこむと必要最低限動くようになります。

さらにtemeを読み込むと、装飾がされ、フォントやロードを読み込むとスライドしたときのボタンが表示されるようになります。

じぶんでカスタマイズする場合は

.css

.js

 

最初からカスタマイズされたものを使用する場合は

.css

.js

.font

.teme

 

を読み込みましょう。

HTML

必要なデータを読み込めば実際に動かす部分となるHTMLを記述していきます。

書き方はスライドさせたい要素にclassやidを指定します。

 

 

jQery

コードは1行だけ!

$(‘.slider’).slick();

 

オプション

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

GitHubには他のオプションも公開されています。

GitHub

slickカスタマイズ

上記のオプションやcssを使ってslickをカスタマイズしていきましょう。

 

 

 

 

これだけのことができるjQeryプラグインは他にはなかなかないはず!

迷ったらまずはslickをお試ししてみてはいかがでしょうか。