Slick/全画面でふわっと切り替えスライドショーjQuery

スライダープラグイン【slick】を使って全画面スライドショーを実装。

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

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

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

デモページ

slickの実装方法
- 外部リンクslickファイル
- ローカルデータslickファイル
フワッと切り替え(background-image版)
- 【コード一覧】背景画像でふわっと切り替え
  - HTML
  - CSS
  - JS
画面でふわっと切り替え【コード】
- 【コード一覧】画面でふわっと切り替え
  - HTML
  - CSS
  - js
slickオプション一覧
クリックでスクロール
両サイドちら見せスライダー
画像リスト_スリック
jQuery不要のスライダー

slickの実装方法

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

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

外部リンクslickファイル

<head></head>の中に下記のコードを入力。
jquery・css・jsのリンクになります。

<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- css -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- js -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>

ローカルデータ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つのファイルを下記のフォルダ構成にします。

index.htmlの<head></head>の中に下記コードを入力。

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/commmon.js"></script>
<!-- css -->
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<!-- js -->
<script type="text/javascript" src="js/slick.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>

フワッと切り替え(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