カルーセルスライダーslickの使い方、カスタマイズのまとめ

2023-04-14 2023-04-23

本記事にはプロモーションが含まれています。

ちょっと古いですがカルーセルスライダーが簡単に実装できるSlickを久しぶりに触る機会がありました。

slickはレスポンシブ設定が可能でスワイプにも対応しています。カルーセルのサイズ、アニメーションの速度、表示するスライドの数、表示する矢印やボタンの種類など、多くのカスタマイズが可能です。また、CSSを使用してデザインをカスタマイズすることもできます。サイトの様々な箇所で応用ができる便利なライブラリです。

使う機会は少なくなりましたがまだjQueryを導入しているサイトでは使う機会もありそうなので使い方とカスタマイズについてまとめます。

http://kenwheeler.github.io/slick/

レスポンシブなスライダーライブラリをまとめています。簡単・使いやすくレスポンシブなカルーセルスライダー

: 簡単・使いやすくレスポンシブなカルーセルスライダー
カルーセルスライダーは、複数の画像や動画、コンテンツを省スペースに効率よく表示できます。シンプルで使いやすいカルーセルスライダーは、ウェブサイトのユーザーエクスペリエンスを向上させ、視覚的にも目をひく ...
続きを見る

slick.jsとslick.cssをCDNで読み込む

slickを使用するには、jQueryとslickのJavaScriptとCSSをHTMLファイルに追加する必要があります。手っ取り早く設置するならCDNで読み込みます。

jsDelivrで読み込む

<!-- 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>

矢印ボタンやドットなどをデザイン済みのまま使いたい場合はslick-theme.cssも読み込む必要があります。githubからダウンロードするか、cdnjsからも読み込むことができます。

slick-carousel
slick-theme.cssやfontファイルにもリンク可能です
https://cdnjs.com/libraries/slick-carousel

github / slick
https://github.com/kenwheeler/slick

基本的な使い方

jQuery,slick.js,slick.cssを読み込んだら、スライドしたい要素を記述します。jQueryを先に読み込むことをお忘れなく。

スライドする要素は、imgタグでもテキストでも可能です。

      <div class="hero">
        <div class="ph1">スライド1</div>
        <div class="ph2">スライド2</div>
        <div class="ph3">スライド3</div>
        <div class="ph4">スライド4</div>
        <div class="ph5">スライド5</div>
      </div>

オプションを設定する

<script>
      $(document).ready(function(){
      	$('.carousel').slick({
      		//ここにオプションを設定する
	});
      });
</script>

slickのDEMO

レスポンシブ設定

slickのレスポンシブ設定ではデバイスのサイズごとにオプション項目を設定できます。

responsive: []の中にbreakpointの値と、settings以下にオプションを設定します。

<script>
      $(document).ready(function(){
      	$('.carousel1').slick({
      		dots: true,
      		infinite: true,
      		slidesToShow: 4,
      		adaptiveHeight: true,
      		responsive: [
      			{
      				breakpoint: 768, 
      				settings: {
      					slidesToShow: 2,
      					slidesToScroll: 2,
      					infinite: true,
      					dots: true
      				}
      			}
      		]
      	});
});

上の例では初期状態ではスライドが4つ、768サイズ以下の時は、2つになります。

センターモード centerMode

See the Pen slick centerMode by mixtaro (@mixtaro) on CodePen.

centerMode:trueにすると、カルーセルの最初の値が真ん中に配置されます。この場合、slidesToShowの値を奇数に設定しないと真ん中になりません。

centerPaddingはカルーセルの両端の余白を調整できます。この値で前と後の要素が見切れた状態で表示することができます。

$(document).ready(function(){
  $('.carousel0').slick({
    slidesToShow: 3,
    centerMode: true,
    centerPadding: '80px',
    arrows:false
  });
});

可変幅 Variable Width

カルーセル内の要素の幅が揃っていない時、slidesToShowの値で等分されるため、高さがバラバラになってしまいます。

variableWidth: trueを設定すれば、画像のwidthが保たれます。

$(document).ready(function(){
  $('.carousel0').slick({
    slidesToShow: 4,
    variableWidth: true
  });
});

See the Pen slick -variableWidth by mixtaro (@mixtaro) on CodePen.

縦方向・垂直スライダー

縦方向のカルーセルスライダーにしたい時は、vertical:trueを指定するだけです。

スワイプも有効にしたい場合はverticalSwiping:trueを指定します。

$('.hero-vertical').slick({
	autoplay: true,
	autoplaySpeed: 4000,
	arrows: false,
	vertical:true,
	verticalSwiping:true
});

slickの垂直スライダーのDEMO

矢印が表示されないに確認すること

カルーセルスライダーを手動で前、次に送る矢印ボタン。slick-themeを使うと丸いアイコンフォントが表示されます。このアイコンをカスタマイズしたいときのやり方を説明します。

slickを設置した時に矢印が表示されない？と困ったら以下の点を確認します。

slickを囲んでいるラッパーにmarginがあるかどうか

デフォルトの状態では、矢印アイコンはカルーセルの外側に表示するようになっています。
そのため、slickを覆っているラッパー要素にmarginがないと矢印がはみ出た状態になっています。

.container{ margin-left:30px; margin-right:30px;}

.container要素にマージンを設定すると矢印が表示されます。

矢印アイコンの色を変更する

矢印アイコンはデフォルトだと白色になっています。背景が白い場合見えなくなっていることがあります。スタイルシートで矢印アイコンの色を変更します。

.slick-prev:before, .slick-next:before{
	color:#333;
}

矢印の位置をカルーセルの上にカスタマイズ

矢印をカルーセルスライダーの上に重ねたい場合はCSSを調整します。

  .slick-next, .slick-prev{
    z-index:10;
  }
  .slick-prev{
    left:4px;
  }
  .slick-next{
    right:4px;
  }

矢印のデザインをカスタマイズ

前へ、次への矢印をGoogleマテリアルアイコンに変更してみます。

See the Pen slick 矢印カスタマイズ Googleマテリアルアイコン by mixtaro (@mixtaro) on CodePen.

slickのオプション、prevArrow,prevNextを指定する

slickのオプションに矢印をカスタマイズできるオプションが用意されています。

prevArrow 前へのボタンのhtmlを変更できます。
初期値は<button type="button" class="slick-prev">Previous</button>

prevNext 次へボタンのhtmlを変更できます。
デフォルトのhtml要素は<button type="button" class="slick-next">Next</button>

$(document).ready(function(){
  $('.carousel4').slick({
    slidesToShow: 4,
    prevArrow:'<span class="btn-prev material-symbols-outlined">chevron_left</span>',
    nextArrow:'<span class="btn-next material-symbols-outlined">chevron_right</span>'
  });
});

CSSで矢印の位置を調整する

矢印の位置をカルーセルの上に表示させるようにCSSを調整します。カルーセルの左端、右端で縦方向の中央に表示されるように設定します。

アイコンのカラーやサイズはcolor,font-sizeプロパティで変更できます。

  .btn-prev,
  .btn-next{
    position:absolute;
    z-index:100;
    top:50%;
    transform:translateY(-50%);
    font-size:48px;
    color:#fff;
    cursor:pointer;
  }
  .btn-prev{
    left:0;
  }
  .btn-next{
    right:0;
  }

オプション設定項目

slickで設定できるオプションの一覧です。

項目	タイプ	初期値	説明
accessibility	boolean	true	タブ、矢印キーの操作を有効にする
adaptiveHeight	boolean	false	水平カルーセルの高さを持たせる
autoplay	boolean	false	自動再生
Speed	整数型(ms）	3000	再生スピード（ms）
arrows	boolean	true	Prev/Next Arrows
asNavFor	string（文字列）	null	他のスライダー (クラスまたは ID 名) のナビゲーションに設定する
appendArrows	string（文字列）	$(要素名)	矢印を付ける場所を変更する (セレクター、html、配列、要素、jQueryオブジェクト)
appendDots	string（文字列）	$(要素名)	ドットの場所を変更する (セレクター、html、配列、要素、jQueryオブジェクト)
prevArrow	string（文字列）または object（DOM）	`<button type="button" class="slick-prev">Previous</button>`	ノードを選択するか、「前へ」矢印の HTML をカスタマイズ
nextArrow	string（文字列）または object（DOM）	`<button type="button" class="slick-next">Next</button>`	ノードを選択するか、「次へ」矢印の HTML をカスタマイズ
centerMode	boolean	false	初期値を中央に配置 slidesToShowを奇数の値に設定
centerPadding	string（文字列）	`50px`	centerMode時のサイドの余白(px または %)
cssEase	string（文字列）	`ease`	CSS3 アニメーションのイージング
customPaging	function	n/a	カスタムページングテンプレート
dots	boolean	false	ドットインジケーターを表示する
dotsClass	string（文字列）	slick-dots	ドットインジケーターのclass名
draggable	boolean	true	マウスドラッグの有効
fade	boolean	false	フェードの有効化
focusOnSelect	boolean	false	選択した要素へのフォーカスを有効にする (クリック)
easing	string（文字列）	`linear`	jQuery animate easingを追加します。easingライブラリやデフォルトのeasingメソッドと併用して使用します。
edgeFriction	整数	0.15	非無限カルーセルのエッジをスワイプしたときの抵抗感
infinite	boolean	true	無限ループスライディング
initialSlide	整数	0	開始するスライド番号
lazyLoad	string（文字列）	`ondemand`	遅延ロードの手法を設定`ondemand`または`progressive`
mobileFirst	boolean	false	レスポンシブ設定は、モバイルファーストの計算を使用します。
pauseOnFocus	boolean	true	フォーカスでオートプレイを一時停止する
pauseOnHover	boolean	true	ホバー時の自動再生を一時停止する
pauseOnDotsHover	boolean	false	ドットがホバーされたときにオートプレイを一時停止させる
respondTo	string（文字列）	`window`	レスポンシブオブジェクトが応答する幅。 `window`, `slider`, `min`
responsive	object	none	ブレイクポイントと設定オブジェクトを含むオブジェクト。与えられた画面幅で設定セットを有効にします。与えられたブレークポイントでスリックを無効にするために、オブジェクトの代わりに「unslick」に設定を設定します。
rows	整数	1	1以上に設定すると、グリッドモードが初期化されます。各行に何枚のスライドを配置するかはslidesPerRowで設定します。
slide	element		スライドとして使用する要素クエリ
slidesPerRow	init	1	rowsオプションでグリッドモードにした場合、各グリッドの行に何枚のスライドを配置するかを設定します。
slidesToShow	init	1	表示するスライドの枚数
slidesToScroll	init	1	スクロールするスライドの数
speed	init	300	スライド/フェードアニメーション速度（ms)
swipe	boolean	true	スワイプを有効にする
swipeToSlide	boolean	false	slidesToScrollに関係なく、ユーザーが直接スライドにドラッグまたはスワイプできるようにする。
touchMove	boolean	true	タッチ操作によるスライド動作の有効化
touchThreshold	init	5	スライドを進めるには、（1/touchThreshold）*スライダーの幅の長さだけスワイプする必要があります。
useCSS	boolean	true	CSS トランジションの有効化/無効化
useTransform	boolean	true	CSSトランスフォームの有効化／無効化
variableWidth	boolean	false	スライドを可変幅にする
vertical	boolean	false	垂直スライドモード
verticalSwiping	boolean	false	垂直スワイプ
rtl	boolean	false	スライダーの向きを右から左へ変更する
waitForAnimate	boolean	true	アニメーション中にスライドを進める要求を無視する
zIndex	数値	1000	スライドのzIndex値を設定する。IE9以下の場合に有効。

今月キャンペーン特典があるサービス

-WEB Tips, デザイン・コーディング
-JavaScript, jQuery

WEB Tips ウェブ・アプリ

Excel, スプレッドシートで曜日を自動入力する方法

ExcelやGoogleスプレッドシートで日付を入力したときに曜日も一緒に表示したいことってよくあります。でも一つ一つ手入力は面倒なので、日付をいれたら曜日も自動的に入力する方法のまとめです。曜日を自動入力する2つ方法：表示形式とTEXT関数曜日を自動入力するには以下の2つの方法があります。セルの表示形式を使う表示形式を使うと、見た目だけでなく、計算にも影響を与えません。ただし、計算やデータ処理には使えません。日付と同じセルに曜日も含めて表示したい時に有効。 TEXT関数を使うTEXT関数を使えば ...

WEB Tips ウェブ・アプリ

重いPDFを軽くしたい！無料オンラインPDF圧縮ツール7選

PDFファイルは情報共有に便利ですが、思った以上にファイルサイズが大きくなってしまってメール送信ができないという経験はありませんか？ PDFの軽量化は、ストレージの節約になるだけでなく、データ送信や共有がスムーズに行えるため、作業効率を高める重要な手段になります。この記事では重くなったPDFを軽くする、無料で使えるオンラインPDF圧縮ツールを厳選し、実際にどのぐらいファイルサイズを圧縮できて、圧縮後の品質はどの程度保持されるのか実例をもとに比較しています。オンラインPDF圧縮ツールのメリット・デメリッ ...

WEB Tips ウェブ・アプリデバイス

HEIC画像をJPGに一括変換する方法 iPhone, Mac, Windows

HEICフォーマットの画像はiOSで標準の画像形式です。でも他の端末に画像を送る用にJPGに一括変換する方法を4つ紹介します。 iPhoneでHEIC形式で写真を保存しない方法は以下の記事で解説しています。iPhoneでHEICをやめる設定方法【Mac】プレビューappで一括変換 iPhoneで撮影した画像をMacに転送してみたら、HEIC形式の画像だった。。。ということありませんか？このままだと使えないのでJPGに変換します。 Macなら標準搭載されている「プレビュー」を使って簡単に一括変換できます。 ...

WEB Tips ウェブ・アプリ

ブログにiPhone, Androidアプリのリンクボタンを貼る方法

ウェブページにスマホアプリのリンクを貼ろうと思った時に、久しくやっていなかったので現在はどうやるんだろう!?とちょっとあたふたしたので今後のためにまとめておきます。 iPhoneアプリのリンクを作成するのに以前は「Link Maker」というページで作成していましたが、iTunes Link Makerは終了したようでページ自体が存在しなくなっています。 2024年現在、iPhone,Androidアプリのリンクボタンを作成できるのは以下の3つです。【2024年最新】iPhone, Androidアプリ ...

WEB Tips デザイン・コーディング

Photoshop 自由変形のやり方と変形できないときの対処法

Photoshopで自由に変形をしたい！オブジェクトを変形して奥行きをつけたい！時の変形方法。この記事はPhotoshopでオブジェクトを変形して遠近感をつける方法と、変形がうまくいかない時の対処法についてまとめます。 Photoshopの変形 Photoshopには単純な拡大縮小やオブジェクトを回転させるほかにも、色々な変形方法があります。変形させる素材 teak wood texture（）もっともよく使う自由変形のショートカットオブジェクトを変形させるときに最もよく使うショートカットがCmd ...

WEB Tips ウェブ・アプリ

同じページを1枚の用紙に並べて印刷する方法

複数ページを1枚の用紙に並べて印刷することはよくあるのですが、1ページの内容を1枚に二つ並べて印刷しいたい時アプリ・ファイルの種類ごとに方法をまとめます。移転のお知らせ新商品のご案内イベント・セミナーのご案内お客様へのご挨拶など、お知らせやご挨拶のような内容を作った時に、A4サイズの用紙1枚に印刷するには大きすぎるから、同じページをA4用紙に並べて印刷したいということありませんか？ 1枚に2つ割付して印刷すれば用紙も節約にもなります。このような時の印刷方法をアプリごとにまとめます。複数ページを ...

サイトで丸数字や★♥など特殊文字を文字化けしないで使う方法

スライダーSwiperの使い方と動かない時に確認すること