ウェブ

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

slickアイキャッチ画像

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

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

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

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

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

slickの実装方法

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

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/

slickサイト
slickサイト

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

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

slickファイル
slickファイル

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

ローカルファイル構成
ローカルファイル構成

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

  1. SlickのWebサイトから最新版をダウンロードして解凍します。

  2. 解凍したslickディレクトリ内のslick.min.jsとslick.cssを使用したいプロジェクトのディレクトリにコピーします。

  3. 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, //ドットナビゲーションをマウスホバーで一時停止を無効
});

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

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’
cssEaseCSS3アニメーションイージングを設定‘ease’
dotsドットナビゲーションボタンを表示するかどうかfalse
dotsClassドットナビゲーションボタンのclass名を指定‘slick-dots’
fadeスライダーの切り替えをスライドではなくフェイドインにするかfalse
focusOnSelectクリックでのスライド切り替えを有効にするかfalse
easingjQueryアニメーションイージングを追加‘linear’
edgeFrictioninfinite: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スライドとして使用する要素を設定
slidesPerRowrowsオプションで2以上が設定されている際、各行にいくつのスライドを表示するか設定1
slidesToShow同時に表示されるスライドの数を設定1
slidesToScroll同時にスクロールされるスライドの数を設定1
speedアニメーションの切り替えスピード300
swipeスワイプでスライドを変更できるかどうかtrue
swipeToSlideslidesToScrollの設定に関係なく、ユーザーがスライドを直接ドラッグまたはスワイプした場合は1スライドずつ動かすfalse
touchMoveタッチでスライドさせられるかどうかtrue
touchThresholdスワイプでスライドさせる距離を設定(1 / touchThreshold)*スライダの幅5
useCSSCSSのtransitionを有効にするかどうかtrue
useTransformCSSのtransformを有効にするかどうかtrue
variableWidthスライド毎に横幅が違う場合、スライド幅を可変にするかどうかfalse
verticalスライドを縦方向にするかどうかfalse
verticalSwiping縦方向のスワイプを有効にするかどうかfalse
rtlスライダーの方向を右から左に変更するか(right to left)false
waitForAnimateスライドアニメーション中にスライドを前後させる要求を無視するかtrue
zIndexスライドの重なり順1000
slickオプション
▪ズーム機能を追加したslickスライダーは下記記事をご確認ください。

クリックでスクロール

See the Pen スリックスライダー_slick by pull-design (@design90806871) on CodePen.

両サイドちら見せスライダー

See the Pen 両サイドちら見せスライダー by pull-design (@design90806871) on CodePen.

画像リスト_スリック

See the Pen 画像リスト_スリック by pull-design (@design90806871) on CodePen.

jQuery不要のスライダー

Swiperの場合はjQuery不要で利用可能です。

外部プラグインもjQueryも使わずに、高機能スライダーとして様々なカスタム可能です。

フルスクリーンでズームしながら画像を切り替える機能が付いています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


上にスクロール 下にスクロール