jQuery/Vanilla Javascript

超有名スライダープラグインslickのエンドロール的な使い方とプログレスバーのカスタムについて

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
slick

今更感があってなかなか記事にできなかったslickですが、なんだかんで使いやすく応用しやすいので役立ちそうな内容に絞ってまとめてみました。

以下よりslickのソースをダウンロードします。
公式サイト:slick-carousel

ダウンロードした中身はこんな感じです。

slickファイルの中身

jQuery依存なのでjquery-3.5.1.min.jsも読み込みます。
slickとして読み込むファイルはslick.cssslick-theme.cssslick.js (slick.min.js)になります。

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

slick基本形として上記のような簡単なスライドを作成します。

スライダーにしたい親要素にslick.jsで使うクラスslide_demo01を設定し、子要素が実際にスライドする部分になります。

<ul class="slide_demo01 wrap_list">
	<li><img src="https://uhaha.net/wp-content/uploads/2021/10/img01.jpg" alt=""></li>
	<li><img src="https://uhaha.net/wp-content/uploads/2021/10/img02.jpg" alt=""></li>
	<li><img src="https://uhaha.net/wp-content/uploads/2021/10/img03.jpg" alt=""></li>
	<li><img src="https://uhaha.net/wp-content/uploads/2021/10/img04.jpg" alt=""></li>
	<li><img src="https://uhaha.net/wp-content/uploads/2021/10/img05.jpg" alt=""></li>
	<li><img src="https://uhaha.net/wp-content/uploads/2021/10/img01.jpg" alt=""></li>
	<li><img src="https://uhaha.net/wp-content/uploads/2021/10/img02.jpg" alt=""></li>
	<li><img src="https://uhaha.net/wp-content/uploads/2021/10/img03.jpg" alt=""></li>
</ul>

slickのオプションは以下の様に設定します。

<script type="text/javascript">
$(document).ready(function(){
	$('.slide_demo01').slick({
		arrows: true,//next、prevの矢印の表示
		dots : true,//ドットの表示
		autoplay: true//自動再生
	});
});
</script>

slick-theme.css内でローディング画像のajax-loader.gifを設定しているので使用する場合は適宜調整します。

基本のslickデモ

カルーセル表示で、映画のエンドロールの様に滑らかに左右や上下にスライドさせる方法です。

通常の設定からオプションを少し変更するのみで簡単にできます。
autoplaySpeed: 0にして制止する時間を無くします。
イージングもcssEase: ‘linear’とし調整します。

	$(document).ready(function(){
		$('.slide_demo02').slick({
			arrows: false,
			autoplay: true,
			autoplaySpeed: 0,//制止するスピード
			speed: 5000,//移動する時間
			cssEase: 'linear',//イージングで均一を設定
			slidesToShow:4,//表示するスライドの数
			slidesToScroll: 1//移動するスライドの数
		});
	});

滑らかなスライダーデモ

次のスライドが表示されるまでのプログレスバー付きスライダーもよく見かけます。
以下のcodepenを参考にしてみました。

See the Pen Slick Progressbar by Felix (@fjacobi) on CodePen.

プログレスバー付きスライダー

上記をカスタムしてdotsをプログレスバーにしてみました。
各スライダーの数プログレスバーを整列させ、各スライドの進捗を視覚化したデザインになります。

まずslickで育成されるdotsのアクティブな状態をプログレスバーに指定します。

$bar = $('.slide_demo03 .slick-dots li.slick-active button');

リセット処理をしている部分で再度dotsのアクティブな状態を設定しなおします。

function resetProgressbar() {
  $bar = $('.slide_demo03 .slick-dots li.slick-active button');//←
  $bar.css({
   width: 0+'%' 
   });
  clearTimeout(tick);
}

ドット部分をCSSで整形します。

.slide_demo03 .slick-dots {
    bottom: 0px;
    display: flex;
    justify-content: space-between;
}
.slide_demo03 .slick-dots li {
    position: relative;
    display: inline-block;
    width: calc(100% / 7 - 3px);
    height: 4px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: #ccc;
}
.slide_demo03 .slick-dots li.slick-active button {
    background: #ff0000;
	 width: 0;
}
.slide_demo03 .slick-dots li button:before {
    content: none;
}

dotsがプログレスバーのスライダー

slickの基本編と応用編をまとめてみました。

ここ数年使い続けているスライダーですが、特にスライドの進捗度が視覚的にわかり、デザイン面でも一段階演出できるプログレスバーの実装に前々から興味がありました。

IEのサポート終了までもう少しですが、それまではまだ使用する機会も多いと思います。

uhaha

私の元スラw。Slider.jsからslickいってswiperって感じすかね。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*