アクセシビリティに配慮した軽量・高機能スライダー　Splide

: らら

2023.04.03

JavaScript

はじめに

最近SwiperやslickでLighthouseのエラーになるので、毎回ソース内をじかにさわってたりするけど・・

バージョンアップとかで・・・とか・・・

なので、ぐぐってみるとSplideというのを発見・・・

Splideとは

TypeScriptで記述され、JQuery使用もなしで動作します。

アクセシビリティに配慮した軽量・高機能スライダーっていうのが特徴です。

主な機能的には、slickとかに比べて問題ない感じでした。

https://ja.splidejs.com/

当然。。スライダーなので完全な対応は難しいとこはあるかと思いますが・・

下記を読んで検討するのもよいかと・・

https://ja.splidejs.com/guides/accessibility/

使い方は・・

こちらは日本語で対応していますので・・

https://ja.splidejs.com/guides/getting-started/

設置方法は特に他とかわらないですね。


<link rel="stylesheet" href="path-to-the-file/splide.min.css">
<script src="path-to-the-file/splide.min.js"></script>
<script>
  document.addEventListener( 'DOMContentLoaded', function() {
    var splide = new Splide( '.splide' );
    splide.mount();
  } );
</script>
<section class="splide" aria-label="Splideの基本的なHTML">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
  </div>
</section>

１画像づつ、自動スクロールを一致させる。perPageだけだと、perPage分スライドしてしまいます。

focus: 0で1枚ずつスライドしてくれます。

focus: "center"にすると真ん中、中心になります。


<!DOCTYPE html>
<html lang="ja" >
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>
<style>
.splide__slide img {
	height: auto;
	width: 100%;
}
</style>
</head>
<script>
document.addEventListener( 'DOMContentLoaded', function () {
	var splide = new Splide(".splide", {
		autoplay: true,
		type:'loop',
		perPage: 3,
		focus: 0,
		interval: 2000,
		pauseOnHover: false,
		pauseOnFocus: false,
		speed: 1000
	})
	splide.mount(window.splide.Extensions );
});
</script>
<body>
<div class="splide">
	<div class="splide__slider">
		<div class="splide__track">
			<ul class="splide__list">
				<li class="splide__slide">
					<img src="./win7/1.jpg">
				</li>
				<li class="splide__slide">
					<img src="./win7/2.jpg">
				</li>
				<li class="splide__slide">
					<img src="./win7/3.jpg">
				</li>
				<li class="splide__slide">
					<img src="./win7/4.jpg">
				</li>
				<li class="splide__slide">
					<img src="./win7/5.jpg">
				</li>
				<li class="splide__slide">
					<img src="./win7/6.jpg">
				</li>
				<li class="splide__slide">
					<img src="./win7/7.jpg">
				</li>
				<li class="splide__slide">
					<img src="./win7/8.jpg">
				</li>
			</ul>
		</div>
  </div>
<!--
  <button class="splide__toggle" type="button">
	  <span class="splide__toggle__play">Play</span>
	  <span class="splide__toggle__pause">Pause</span>
  </button>
-->
</div>
</body>
</html>

一般的なやつ・・


<!DOCTYPE html>
<html lang="ja" >
<head>
<meta charset="UTF-8">
<title>テスト</title>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/js/splide.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/css/splide.min.css" rel="stylesheet">
<style>
.splide {
	width: 700px;
}
.splide__slide img {
	height: auto;
	width: 100%;
}
</style>
</head>
<body>
<div class="splide">
	<div class="splide__slider">
		<div class="splide__track">
			<ul class="splide__list">
				<li class="splide__slide"><img src="./win7/1.jpg"></li>
				<li class="splide__slide"><img src="./win7/2.jpg"></li>
				<li class="splide__slide"><img src="./win7/3.jpg"></li>
				<li class="splide__slide"><img src="./win7/4.jpg"></li>
				<li class="splide__slide"><img src="./win7/5.jpg"></li>
				<li class="splide__slide"><img src="./win7/6.jpg"></li>
				<li class="splide__slide"><img src="./win7/7.jpg"></li>
				<li class="splide__slide"><img src="./win7/8.jpg"></li>
			</ul>
		</div>
  </div>
<!--
  <button class="splide__toggle" type="button">
	  <span class="splide__toggle__play">Play</span>
	  <span class="splide__toggle__pause">Pause</span>
  </button>
-->
</div>
<script>
document.addEventListener( 'DOMContentLoaded', function () {
	var splide = new Splide(".splide", {
		autoplay: true,
		type:'fade',
		rewind:true,
		interval: 1000,
		pauseOnHover: false,
		pauseOnFocus: false,
		autoplay: true,
		speed: 1000
	})
	splide.mount();
});
</script>
</body>
</html>

PCによって自動スライダーしない不具合がある感じ・・・ver 4.1.4

下記の対応で動く・・・けど・・・


document.addEventListener( 'DOMContentLoaded', function () {
	var splide = new Splide(".splide", {
		autoplay: true,
		type:'fade',
		rewind:true,
		interval: 1000,
		pauseOnHover: false,
		pauseOnFocus: false,
		autoplay: true,
		speed: 1000
	})
	splide.mount();
	var Autoplay = splide.Components.Autoplay;
	Autoplay.play();
});