初心者のウェブ制作者の方でも簡単に扱えるカルーセルスライダー［Siema］を紹介します。

まずは実装してみたサンプルをどうぞ。

Siema 実装サンプル：https://on-ze.com/demo/js-siema/

動作も軽快でサクッと動きますね。

公式の配布サイトは以下。

Siema : https://pawelgrzybek.com/siema/

こちらから必要なファイル一式をダウンロードしてきましょう。
……とは言っても『必要なファイル』って『siema.min.js』ただ１つだけなんですが……。

使い方

Siema の導入方法は簡単です。
まずは入手した『siema.min.js』をHTMLの適当な箇所で読み込みます。

<script src="siema.min.js"></script>

jQueryには依存せず単体で使えるのが嬉しいところです。

スライダー部分のマークアップも次のようにシンプルに。

<div class="siema">
	<div>Hi, I'm slide 1</div>
	<div>Hi, I'm slide 2</div>
	<div>Hi, I'm slide 3</div>
	<div>Hi, I'm slide 4</div>
</div>

最後にスクリプトを動かす初期設定を。

<script>
	 new Siema();
</script>

たったコレだけで動いてしまうシンプル設計。

Siema 実装サンプル：https://on-ze.com/demo/js-siema/

初心者のウェブ制作者の方々にオススメする所以を理解していただけたかと思います。

オプション設定

オプションの設定項目は合計８つ用意されています。

new Siema({
	selector: '.siema',
	duration: 200,
	easing: 'ease-out',
	perPage: 1,
	startIndex: 0,
	draggable: true,
	threshold: 20,
	loop: false,
	onInit: () => {},
	onChange: () => {},
});

ブラウザサポート

現時点でのブラウザのサポートは次のとおり。

  • IE 10
  • Chrome 12
  • Firefox 16
  • Opera 15
  • Safari 4
  • Android Browser 4.0
  • iOS Safari 6.0

最後に。

制作者様によると「よりパワフルな機能を望むなら『Flickity』や『Swiper』をオススメします」とのこと。他のプラグインの名を挙げて堂々とお勧めするあたりに謙虚な姿勢が垣間見れますね。

Siema : https://pawelgrzybek.com/siema/