画像スライダーのSiemaを幅で表示画像枚数を可変にする

今回画像スライダーのSiemaの表示画像枚数を幅で可変にさせてみたメモになります。

旧 画像スライダーのSiemaを幅で枚数を可変にする。
https://qiita.com/murase131/items/dc7c4fae777c146cd3c4
こちらの改良版になります。

前提として、
Siemaとは　JavaScriptによる、画像スライダー
https://pawelgrzybek.github.io/siema/

詳しくは、ほかの人のこれらがわかりやすかったです。
【JavaScript】単体で使える超軽量スライダー［Siema］は初心者の方にオススメです。
https://on-ze.com/archives/6194
超軽量スライダーSiemaが最高なのでお勧めしたい
https://suzumenote.com/tech/395

やりたいことは、

表示される画像をPCでは2枚、スマホでは1枚にしたい。
HTMLまたは、CSSまた、公式Siemaのオプションではできない？と思いますので、こうしましたというメモ書き。

---

本題のコードですが、こちら

 <script>
        var mySiema =new Siema({
					duration: 500,
					loop: true
				});
		setInterval(() => mySiema.next(), 5000);

		function rePerPage(){
			if(mySiema.selectorWidth <=750){
				mySiema.config.perPage = 1;
			}else{
				mySiema.config.perPage = 2;
			}
			mySiema.resizeHandler();	
		}
		window.addEventListener('resize', resizeWindow);
		resizeWindow();	
    </script>

になります。
意味は selectorで指定したClassの幅が750以下なら画像の表示枚数を1それ以降なら2枚にするです。このコードをbodyタグの閉じタグ直前に記入します。

---

細かいコード説明です。

こちらは公式にあるオプションです。

  var mySiema =new Siema({
					duration: 500,
					loop: true
				});
		setInterval(() => mySiema.next(), 5000);

上で紹介した超軽量スライダーSiemaが最高なのでお勧めしたいにてここは説明されていますので大まかに、

new演算子でインスタンスを生成時に、
スライド時の速度を0.5秒とループをするように設定

setIntervalで5秒ごとに自動スライドを設定しています。

こちらが追加した表示画像枚数を可変にするコードです。

function rePerPage(){
			if(mySiema.selectorWidth <=750){//750以下か判定
				mySiema.config.perPage = 1;//１枚
			}else{
				mySiema.config.perPage = 2;//２枚
			}
			mySiema.resizeHandler();//更新
		}
		window.addEventListener('resize', resizeWindow);//画面サイズ変更時のイベント
		resizeWindow();	//ページ読み込み時に実行

rePerPageメソッドは
if文によりselectorのClassのタグの幅が750以下なら画像を１枚それ以降なら２枚にしています。
その後、SiemaのresizeHandlerメソッドを使用し表示を更新しています。
こちらをresizeイベント(ウィンドウサイズが変更されたときに発生するイベント)により随時呼び出しと、webページ読み込み時に実行しています。

---

ちょっとした、わかったこと。

超軽量スライダーSiemaが最高なのでお勧めしたい
https://suzumenote.com/tech/395
にて
multipleDrag　謎です。とのことが書いてありましたが、
表示枚数を３枚にすると、わかりやすいですが、
multipleDragをfalseにすると三枚をすべて新しい画像にスライドできなくなります。
multipleDragをtrueにすると三枚をすべて新しい画像にスライドできます。
ということです。

---

おまけ

ちょっとした、コード。

next,prevボタンを縦横並びをサイズで可変にする

CSS

@media (max-width:767px){
	.siema-btn ul{
		display:grid;
		grid-template-columns: 100%;
		grid-template-rows: 50% 50%;
		}
		.prev{
		grid-row:2/3;
		}
		.next{
		grid-row:1/2;
	}
}

こちらのCSSはnext,prevボタンの表示順序が767px以上では横並び、767px以下なら縦並びなら、縦並びの時、prevボタンが上に来てしまうので、nextボタンを上に持ってくるCSSです。
参考にしたもの
「display:grid」の使い方について【備忘録】
https://freemas.org/making/css/display-grid

767px以上では横並び

767px以下なら縦並び
nextを上に持ってきたのが右。
　

---

ブラウザ幅で表示画像枚数を判定

function rePerPage(){
			if(document.body.scrollWidth<=750){//750以上か判定
				mySiema.config.perPage = 1;//１枚
			}else{
				mySiema.config.perPage = 2;//２枚
			}
			mySiema.resizeHandler();//更新
		}

意味は ビューポートの幅 (スクロールバーの幅を除く)　が750以下なら画像の表示枚数を１枚に750px以降なら２枚にするです。

ビューポートの幅とは、簡単にブラウザの(スクロールバーの幅を除く)横幅サイズになります。これらのサイトを参考にしました。
Element.clientWidth
https://developer.mozilla.org/ja/docs/Web/API/Element/clientWidth
JavaScriptでウインドウサイズを取得
https://web-designer.cman.jp/javascript_ref/window/size/