ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2019.10.02  最終更新日:2021.07.29

js / jQuery

slickで簡単にスライダーを作りオプションでカスタマイズする方法。(slickの使い方)

スライダーを作る機会は、たくさんあるかと思います。また、プラグインもたくさんあります。そんな中で、簡単に使えて、たくさんオプションがあるため、自分の用途に合わせて使い勝手が良い、プラグイン「slick」の使い方を解説していきます!

「slick」の使い方をマスターすると、かなり色々なものが作れると思います!

slick.jsの基本の使い方手順

①ファイルのダウンロード

slickのページ にアクセスして、ファイルをダウンロードする。

get it now ボタンを押下で、ページの下の方に移動します。

Download Now ボタンを押下で、ファイルのダウンロードが始まります。

②必要なファイルを任意のフォルダに設置する

  • slick.css
  • slick-theme.css
  • slick.js

の3つのファイルが必要です。任意のフォルダ設置してください。
※minファイルもありますので、ご自身の用途に合わせて選択してください。

③ファイルを読み込む

<link rel="stylesheet" type="text/css" href="slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-theme.css"/>
<script src='jquery.js'></script>
<script src="slick.js"></script>

slick.css、slick.jsの他に、jQueryのファイルも読んでおいてください。

④JS・HTMLにmodaal.jsを動かすコードを書く(一番基本のスライダー)

一番基本的でシンプルな、1枚の画像が表示されていて、左右に矢印、あるスライダーの作り方です。

左右の矢印をクリックすると画像が前後に切り替わります。

HTML

<div class="slider">
  <div>
    <img src="img01.jpg" alt="">
  </div>
  <div>
    <img src="img02.jpg" alt="">
  </div>
  <div>
    <img src="img03.jpg" alt="">
  </div>
  <div>
    <img src="img04.jpg" alt="">
  </div>
</div>

jQuery

$('.slider').slick();

以下に完成サンプルをつくっているので、実際にどのようになるのか見てみてください。

slickのオプションを使ってカスタマイズしてみる

画像が自動で切り替わる(autoplay)スライダーをつくる

完成サンプル2をご覧ください。

HTML

HTMLは上記と一緒で大丈夫です。

JS

※dots:trueドットを表示するオプションは、『 dots:true 』です。

$('.slider').slick({
  dots:true,
  autoplay: true,
  autoplaySpeed: 2000
});

フェードして切り替わる(fade)スライダーをつくる

使用用途としては、トップページの上部にあるメインビジュアルでよくみられるような形です。
画像は自動でフェードして切り替わり、ドットは見えていて、矢印がない形です。
完成サンプル3をご覧ください。

HTML

HTMLは上記と一緒で大丈夫です。

JS

※画像をループさせるオプションは『 infinite:true 』、
※矢印を消すオプションは、『 arrows: false 』です。
※最後の『 pauseOnHover: false 』は、画像の上でマウスがホバー していても、画像は止まらずに切り替わる、というオプションです。
※デフォルトだと、『 pauseOnHover: true 』となっていて、画像の上にマウスをもっていくと、画像の自動切り替えがtrue(『autoplay: true』)になっていても動きが止まってしまいます。

$('.slider').slick({
  dots: true,
  autoplay: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear',
  arrows: false,
  pauseOnHover: false
});

ブラウザサイズによって見栄えが切り替える等、レスポンシブの設定方法

PCのときは画像を多く見せて、SPのときは1つだけ見せたい、など、ブラウザサイズによってスライダーの見栄えを変更できるのですが、その方法です。

今回は、768以上の場合は5つ、767px以下の場合は3つ、400px以下の場合は1つ画像を表示させるスライダーをつくる。(数値は変えられます。)

完成サンプル4をご覧ください。
※ブラウザのサイズを変えながらご確認頂くとわかりやすいかと思います。

HTML

HTMLは上記と一緒で大丈夫です。ただ、今回は見た目的にわかりやすくするため、画像を8枚使用しています。

JS

※前後のスライドも少しだけ見えるように含めてスライドを中央に表示します。『 centerMode:true 』、
※何個スライドを見せるかを決めるオプションが『slidesToShow:5 』です。
※最後の『 slideToScroll:1 』は、何個ずつスライドするかを決めるオプションです。

$('.slider').slick({
		dots: true,
		speed: 300,
		slidesToShow: 5,
		slidesToScroll: 1,
		centerMode: true,
		responsive: [
			{
				breakpoint: 767,
				settings: {
					slidesToShow: 3,
					slidesToScroll: 1,
					infinite: true,
					dots: true
				}
			},
			{
				breakpoint: 400,
				settings: {
					slidesToShow: 1,
					slidesToScroll: 1
				}
			}
		]
	});

センターモードで左右の画像を少し見切れさせる

左右の画像を少し見切れさせるような見せ方ができます。

HTML

HTMLは上記と一緒で大丈夫です。ただ、今回は見た目的にわかりやすくするため、画像を7枚使用しています。

JS

※前後のスライドも少しだけ見えるように含めてスライドを中央に表示します。『 centerMode:true 』、
※左右にどれだけpaddingをつけるか決めるオプションが『centerPadding』です。
※最後の『 slideToShow 』は、何個表示さオプションです。

$('.slider').slick({
			centerMode: true,
			centerPadding: '40px',
			slidesToShow: 3,
			responsive: [
				{
						breakpoint: 768,
						settings: {
						slidesToShow: 1
					}
				}
			]
		});

よく使うslickの各オプションの説明

本家サイトのSettingに書いてあるものの使い方のメモです。
※まだまだありますので、徐々に追加していきます。

autoplay系オプション

autoplay

スライダーを自動で動かすためのオプションです。
デフォルトのautoplayはfalseとなっています。

autoplay:true

と書くとスライダーは自動で動きます。

autoplaySpeed

autoplayで自動で動かすスライダーの、画像が切り替わるスピードを変更するオプションです。
デフォルトのautoplayは3000(3秒)となっています。

autoplaySpeed:1000

ナビゲーション系オプション

arrows

次、前へ画像を切り替えるためのボタンのオプションです。
デフォルトのarrowsはtrueとなっています。
非表示にしたい場合下記のように記述します。

arrows:false
dots

今何番目の画像が表示されているかのドットのオプションです。
デフォルトのdotsはfalseとなっています。
表示にしたい場合下記のように記述します。

dots:true

挙動の制御系

infinite

スライドの無限ループをさせるためのオプションです。
デフォルトのinfiniteはtrueとなっています。(なので、これを変更することは滅多にないかと思いますが、、)
ループさせたくない場合には、下記の様に記述します。

infinite:false

pauseOnHover

hoverしたときにどのような挙動にするか制御するオプションです。
デフォルトのpauseOnHoverはtrueとなっています。
hoverしたときにも動きを止めたくない場合には、下記の様に記述します。

pauseOnHover:false
slidesToScroll

何個ずつ画像をスライドさせるかを制御するオプションです。
デフォルトのslideToScrollは1となっています。

slidesToScroll:1

見栄えの制御系

centerMode

前後のスライドも少しだけ見えるように含めて、スライドを中央に表示するオプションです。デフォルトのcenterModeはfalseとなっています。

centerMode:true


最新記事