Slick/全画面でふわっと切り替えスライドショーjQuery｜プルデザイン-design_pull

スライダープラグイン【slick】を使って全画面スライドショーを実装についての記事になります。

「slickの実装方法」と「slickのカスタマイズ」について解説していきます。画像のスライドショーにはいろんな方法がありますが、jQueryベースの【slick】が安定していてカスタマイズもしやすいのでオススメです。

Slickスライダーは、jQueryを使用して作成されたレスポンシブ対応のスライダープラグインです。このプラグインを使用すると、Webページにスライダーを簡単に追加することができます。Slickスライダーには多数の設定オプションがあり、自分のウェブサイトのスタイルに合わせてカスタマイズすることができます。また、スライダー内に画像やビデオ、HTMLなど、さまざまなコンテンツを表示することができます。Slickスライダーは、ウェブサイトのホームページ、プロダクトギャラリーやブログ記事など、多くの場面で使用されています。

動作は下のデモページボタンから確認できます。

【全画面スライドショー】

デモページ

slickの実装方法

まずは、jQueryベースのプラグインなのでjQueryの実装します。

slickを使用する為には二種類あり「外部リンクslickファイル」か「ローカルデータslickファイル」どちらかです。

Slickスライダーを実装するには、以下の手順を実行する必要があります。

外部リンクslickファイル

1、jQueryとSlickのスクリプトを読み込む

まず、jQueryとSlickのスクリプトを読み込みます。以下の例では、CDNからのスクリプトを読み込んでいます。

<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
</head>

このコードは、jQueryとSlickのJavaScriptのライブラリを読み込んでいます。具体的には、以下のことが行われています。

これによって、ウェブページ内で jQuery と Slick の機能が利用できるようになり。Slick を使ってスライドショーを作成することができます。

2、HTMLマークアップを記述する

SlickスライダーのHTMLマークアップを記述します。以下は、3枚の画像をスライダーに表示する例です。

<div class="slider">
  <div><img src="image1.jpg"></div>
  <div><img src="image2.jpg"></div>
  <div><img src="image3.jpg"></div>
</div>

3、スライダーを初期化する

最後に、JavaScriptでSlickスライダーを初期化します。以下は、初期化の例です。

$(document).ready(function(){
  $('.slider').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    dots: true,
    centerMode: true,
    centerPadding: '10%'
  });
});

上記の例では、autoplay（自動再生）を有効にし、autoplaySpeed（自動再生速度）を2秒に設定し、左右の矢印を非表示にし、ドット（ページネーション）を表示し、センターモードを有効にし、スライド間の余白を10%に設定しています。

これらの手順を実行することで、SlickスライダーをWebページに実装することができます。

ローカルデータslickファイル

slickファイルを自身のPCにダウンロード

▪slick公式サイトhttps://kenwheeler.github.io/slick/

ダウンロードが完了したらzipファイルを解凍。
フォルダ「slick-1.8.1」→「slick-1.8.1」→「slick」→slick.css・slick.min.jsのファイルが入っています。

その中で必須になるslickファイルはslick.min.js・slick.css・slick-theme.css

slickの3つのファイルを下記のフォルダ構成にします。

SlickはjQueryプラグインなので、使用するには以下の手順が必要です。

SlickのWebサイトから最新版をダウンロードして解凍します。
解凍したslickディレクトリ内のslick.min.jsとslick.cssを使用したいプロジェクトのディレクトリにコピーします。
HTMLファイルでjQueryとSlickのスタイルシートとJavaScriptファイルを読み込みます。

この手順移行はHTMLに下記コードを記述します。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Slick Demo</title>
	<link rel="stylesheet" type="text/css" href="slick/slick.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript" src="slick/slick.min.js"></script>
</head>
<body>
	<div class="slick-slider">
		<div><img src="slide1.jpg"></div>
		<div><img src="slide2.jpg"></div>
		<div><img src="slide3.jpg"></div>
	</div>
	<script>
		$(document).ready(function(){
			$('.slick-slider').slick();
		});
	</script>
</body>
</html>

ここでは、jQueryとSlickのスタイルシートとJavaScriptファイルを読み込み、slick-sliderクラスを持つ要素をSlickスライダーに変換しています。上記の例では、slick-slider内の3つのdiv要素に画像が表示されます。

フワッと切り替え(background-image版)

See the Pen スリックスライダーフワッと切り替え(background-image版) by pull-design (@design90806871) on CodePen.

【コード一覧】背景画像でふわっと切り替え

ulで囲みliに対してbackground-imageで画像を配置します。

HTML

<ul class="slider">
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

/* リセットCSS */
body,ul,li { padding: 0; margin: 0;}
/* スリックスライダー */
.slider li {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.slider li:first-of-type {
  background-image: url(https://picsum.photos/1921/1080);
}
.slider li:nth-of-type(2) {
  background-image: url(https://picsum.photos/1922/1081);
}
.slider li:last-of-type {
  background-image: url(https://picsum.photos/1923/1082);
}

JS

$('.slider').slick({
  infinite: true, //スライドのループを有効
  arrows: false, //前へ、次への矢印ボタンの有無
  fade: true, //スライドの切り替えをフェードに
  speed: 2000, //アニメーションの切り替えスピード
  autoplaySpeed: 3000, //自動再生時のスライドの静止時間
  autoplay: true, //スライダーの自動再生
  pauseOnFocus: false, //フォーカスで一時停止を無効
  pauseOnHover: false, //マウスホバーで一時停止を無効
  pauseOnDotsHover: false, //ドットナビゲーションをマウスホバーで一時停止を無効
});

画面でふわっと切り替え【コード】

See the Pen スリックスライダーフワッと切り替え by pull-design (@design90806871) on CodePen.

【コード一覧】画面でふわっと切り替え

ulで囲みliの中に画像を入れます。このコードのimgは自動で変わる画像に設定しているので、画像を設定したい場合は、imgフォルダを作ってその中に画像を入れて指定しましょう。

HTML

<ul class="slider">
  <li><img src="https://picsum.photos/1920/1080"></li>
  <li><img src="https://picsum.photos/1950/1082"></li>
  <li><img src="https://picsum.photos/1980/1081"></li>
</ul>

CSS

/* リセットCSS */
body,ul,li {padding: 0; margin: 0;}
/* スリックスライダー */
.slider img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

js

$('.slider').slick({
  infinite: true, //スライドのループを有効
  arrows: false, //前へ、次への矢印ボタンの有無
  fade: true, //スライドの切り替えをフェードに
  speed: 2000, //アニメーションの切り替えスピード
  autoplaySpeed: 3000, //自動再生時のスライドの静止時間
  autoplay: true, //スライダーの自動再生
  pauseOnFocus: false, //フォーカスで一時停止を無効
  pauseOnHover: false, //マウスホバーで一時停止を無効
  pauseOnDotsHover: false, //ドットナビゲーションをマウスホバーで一時停止を無効
});

ポイント

・ライダーが止まってしまう場合がある時は下記コードを入力すると止まることなく動いてくれます。

  pauseOnFocus: false,
  pauseOnHover: false,
  pauseOnDotsHover: false,

レスポンシブ対応にもなっているので、コードが多いですがコピーペーストで実装できます。

slickオプション一覧

オプション名	説明	初期値
accessibility	キーボードの矢印キーやTabキーで操作設定	true
adaptiveHeight	スライダーの高さの自動調整	false
autoplay	スライダーの自動再生	false
autoplaySpeed	自動再生のスピード（ミリ秒単位）	3000
arrows	前へ、次への矢印ボタン	true
asNavFor	他のスライダーのナビゲーションに設定	null
appendArrows	左右の矢印ボタンの場所を変更	$(element)
appendDots	ドットインジケーターの場所変更	$(element)
prevArrow	矢印ボタンの「前へ」のHTMLをカスタマイズ	<button type=”button” class=”slick-prev”>Previous</button>
nextArrow	矢印ボタンの「次へ」のHTMLをカスタマイズ	<button type=”button” class=”slick-next”>Next</button>
centerMode	スライダーを中心に表示して部分的に前後のスライドが見えるように設定	false
centerPadding	見切れるスライダーの幅。’px’または’％’。	’50px’
cssEase	CSS3アニメーションイージングを設定	‘ease’
dots	ドットナビゲーションボタンを表示するかどうか	false
dotsClass	ドットナビゲーションボタンのclass名を指定	‘slick-dots’
fade	スライダーの切り替えをスライドではなくフェイドインにするか	false
focusOnSelect	クリックでのスライド切り替えを有効にするか	false
easing	jQueryアニメーションイージングを追加	‘linear’
edgeFriction	infinite:falseのときに最初と最後のスライドをスワイプした時のフリクション値を設定	0.15
infinite	スライドの端まできた時にループさせるかどうか	true
initialSlide	最初に表示するスライドを指定	0
lazyLoad	画像の遅延読み込みを設定（’ondemand’か’progressive’）	ondemand
mobileFirst	レスポンシブの設定でモバイルの計算を優先させる	false
pauseOnFocus	自動再生時にスライドにフォーカスした際、自動再生をストップさせるか	true
pauseOnHover	自動再生時にスライドにマウスオーバーした際、自動再生をストップさせるか	true
pauseOnDotsHover	自動再生時にドットインジケーターにマウスオーバーした際、自動再生をストップさせるか	false
respondTo	レスポンシブの基準を設定（’window’もしくは’slider’もしくは’min’）	window
responsive	レスポンシブのブレイクポイントを指定	none
rows	スライドの行数を設定（slidesPerRowを使用して、各行に含めるスライドの数を設定）	1
slide	スライドとして使用する要素を設定	”
slidesPerRow	rowsオプションで2以上が設定されている際、各行にいくつのスライドを表示するか設定	1
slidesToShow	同時に表示されるスライドの数を設定	1
slidesToScroll	同時にスクロールされるスライドの数を設定	1
speed	アニメーションの切り替えスピード	300
swipe	スワイプでスライドを変更できるかどうか	true
swipeToSlide	slidesToScrollの設定に関係なく、ユーザーがスライドを直接ドラッグまたはスワイプした場合は1スライドずつ動かす	false
touchMove	タッチでスライドさせられるかどうか	true
touchThreshold	スワイプでスライドさせる距離を設定（1 / touchThreshold）*スライダの幅	5
useCSS	CSSのtransitionを有効にするかどうか	true
useTransform	CSSのtransformを有効にするかどうか	true
variableWidth	スライド毎に横幅が違う場合、スライド幅を可変にするかどうか	false
vertical	スライドを縦方向にするかどうか	false
verticalSwiping	縦方向のスワイプを有効にするかどうか	false
rtl	スライダーの方向を右から左に変更するか（right to left）	false
waitForAnimate	スライドアニメーション中にスライドを前後させる要求を無視するか	true
zIndex	スライドの重なり順	1000