初心者もマネするだけ！簡単にスライダーを実装できるslickの使い方
１カラムのサイトが増えたり、SNSのインスタグラムが横スライドを導入したり、
最近は横スライドのコンテンツを多く見るようになりました。
横スライドのコンテンツのことを「スライダー」と呼ぶのですが、
このスライダーを初心者でも簡単に実装できる「slick」を紹介します！
1、slickをダウンロードする
slickは無料配布されているプラグインのことです。
まずは、slickをダウンロードしましょう。
slickは以下のサイトからダウンロードが可能です。
http://kenwheeler.github.io/slick/
ダウンロードが完了したら、
zipファイルを解凍し、以下のデータをサーバーにアップします。
fonts(ファイル)
slick.css
slick-theme.css
slick.min.js
ajax-loader.gif
サーバーにアップが完了したら、
slickを使いたいサイトのヘッダーで、各データを読み込みます。
【HTML】
|
1 2 3 4 |
2、HTMLの記述をする
次に、スライダーにしたいアイテムをHTMLで記述します。
【HTML】
|
1 2 3 4 5 6 7 8 |
HTMLの記述はulでなくても構いません。
スライドさせたい要素をdivやulで囲った記述をしてください。
3、jQueryを書く
次は、slickを実際に動かすためのjqueryを記載します。
ここからは実際にどう動くのかを見られるようにしながら説明します。
3-1、基本のslick
【HTML】
|
1 2 3 4 5 6 7 8 |
【jQuery】
|
1 2 3 |
$(document).ready(function(){ $('.slider01').slick(); }); |
【結果】
アイテムをスライドさせるだけれあれば、この記述だけで動作します。
3-2、一度に表示されるアイテムを増やしたい
スライド前のアイテムの表示数を増減させるには、
以下のようにjQueryを書きます。
【HTML】
|
1 2 3 4 5 6 7 8 |
【jQuery】
|
1 2 3 4 5 |
$(document).ready(function(){ $('.slider02').slick({ slidesToShow: 3 }); }); |
【結果】
上記の「slidesToShow」というオプションは「見えているアイテムをいくつに設定するか」の設定をすることができます。
3-3、一度にスライドされるアイテムを増やしたい
スライドするアイテムの数を変更するには、
以下のように書きます。
【HTML】
|
1 2 3 4 5 6 7 8 |
【jQuery】
|
1 2 3 4 5 6 |
$(document).ready(function(){ $('.slider03').slick({ slidesToShow: 2, slidesToScroll: 2 }); }); |
【結果】
今回の設定は、２個のアイテムがあらかじめ表示されていて、
アイテムが２個ずつスライドする設定です。
3-4、今どのアイテムが表示されているかのドットを表示させたい
スライダーでよく見る、今表示されているアイテムが何個めのアイテムかを示す、ドットを表示させる方法です。
【HTML】
|
1 2 3 4 5 6 7 8 |
【jQuery】
|
1 2 3 4 5 |
$(document).ready(function(){ $('.slider04').slick({ dots: true }); }); |
【結果】
オプションのdotsをtrueにすることでドットが表示されました。
このようにslickのオプションはfalseまたはtrueで切り替えるものもあります。
3-5、スライドを自動再生にしたい
次に、自動でアイテムをスライドさせる方法です。
【HTML】
|
1 2 3 4 5 6 7 8 |
【jQuery】
|
1 2 3 4 5 |
$(document).ready(function(){ $('.slider05').slick({ autoplay: true }); }); |
【結果】
autoplayの値をtrueにすることで、スライドが自動再生されるようになりました。
3-6、自動スライドにかかる時間を調整したい
表示させるアイテムの内容量によっては、自動スライドの時間を遅くしたい・早くしたい！と思うことがあるでしょう。
そういった時は、以下のオプションで時間の調整をします。
【HTML】
|
1 2 3 4 5 6 7 8 |
【jQuery】
|
1 2 3 4 5 6 |
$(document).ready(function(){ $('.slider06').slick({ autoplay: true, autoplaySpeed: 3000 }); }); |
【結果】
「autoplaySpeed」の値を変更することで、表示切り替えまでの時間を変更することができます。
上記で設定した3000は3秒で、初期値となります。
これよりも遅くしたいときは、数字を大きくし、
これよりも早くしたいときは数字を小さくします。
3-7、スライドが滑らかに動くようにしたい
これまでのスライドは自分で動かすか、自動で数枚ずつ動く設定でした。
こちらでは自動再生かつ、アイテムが滑らかにスライドする方法を紹介します。
【HTML】
|
1 2 3 4 5 6 7 8 |
【jQuery】
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function(){ $('.slider07').slick({ arrows: false, slidesToShow: 2, autoplay: true, autoplaySpeed: 0, cssEase: 'linear', speed: 5000 }); }); |
【結果】
スライドが滑らかに動くようになりました。
autoplayをtrueにして自動再生を許可し、
autoplaySpeedを0にすることで、次のスライドが表示されるまでの時間を０にします。
cssEaseはスライドのアニメーション方法を設定するオプション。
値をlinearにすることで、滑らかにアニメーションするようにします。
最後にspeedでスライドのスピードを調整して完成です。
3-8、オプション一覧表
このようにslickは、あらかじめ決められたオプションの値を設定していくことで完成します。
この他にもオプションはたくさんあるので、
こちらの表から自分の設定したいオプションを探してみてください。
オプション名
動作
初期値
autoplay
自動切り替え
false
autoplaySpeed
自動切り替えの待ち時間
3000
arrows
前後ボタンのナビゲーションの有無
true
centerMode
要素を中央揃え
false
centerPadding
要素を中央揃えにした時の左右のパディング設定
’50px’
cssEase
CSSでアニメーションさせる場合のイージング
‘ease’
dots
ドットの表示
false
draggable
マウスドラッグを有効にするかどうか
true
fade
切り替えをフェードで行うかどうか
false
easing
イージング
‘linear’
infinite
スライドをループさせるか
true
pauseOnHover
自動切り替え設定時に、オンマウスで一時停止するか
true
pauseOnDotsHover
自動切り替え設定時に、黒点にオンマウスで一時停止するか
false
slidesToShow
表示する要素の数
1
slidesToScroll
1回のスライドで動かす要素数
1
speed
スライドのスピード
300
swipe
スワイプでスライドするか
true
swipeToSlide
マウスドラッグやスワイプをした時に、slidesToScrollで設定している以上に移動させるか
false
執筆者
DTPデザイナー、雑貨屋さんのスタッフ、一般事務… 散々やりたいことをやり散らかして、WEBデザイナーに落ち着きました。ものを作っている時間が好き。
うさぎと音楽が好きすぎて、うさぎと音楽を無理やりこじつけたお洋服を作ったり、イベント企画をしたりもしています。
この記事を読んだ人はこんな記事も読んでいます
CHANGEUP!では、エンジニアの転職、
フリーランスの案件紹介を行なっています。
将来の働き方で迷っている方、転職をお考えの方、あなたのエンジニアとしての力を最大限発揮できる場所を提案させていただきます。
サービス紹介
よくある質問
