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

今回Siemaをスマホ対応させてみたメモになります。

新しく書き直しました
https://qiita.com/murase131/items/c371c98c3332b3b1f2c4

前提として、
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のオプションではできない？わからなかったので、Siemaのsiema.min.jsファイルをいじりました。
ただ、JavaScript言語が全く分からない、なので取り敢えず弄ってみましした。
（あまり時間がなかったので、JavaScriptを学ぶのはまたの機会に）

---

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

if(document.body.scrollWidth<=750)
this.perPage=1;

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

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

追加コードを
siema.min.jsファイル　

{
				key:"buildSliderFrame",
				value:function()
				{
					/*追加コード*/
					if(document.body.scrollWidth<=750)
					this.perPage=1;

ここに入れます。
場所を探すのはkey:"buildSliderFrame"を目印にすると良いと思います。
問題のなぜここの場所に入れるかが、自分でもよくわかってないです。

ここの場所に入れた経緯を書いていきます。
まず、一行で公式コードが書かれているので、{} や ; や , で改行しました。
そしてperPageの変数、が画像の表示数であることが、公式オプションから読み取れました。
なので、この変数を探しました。
(jsファイルを開くのにMery を使いましたが　検索機能　便利でした)

その最中にkey:~~があり　key:"Next" や key:"prev"　など見たことあるものがあり、そこからkey:~~は処理内容にそった文字列だと予測、またfunctionがJavaScriptの関数であることが調べてわかりました。

なので、perPage変数がある関数の最初の行に追加コードを書いてみて、webブラウザで動作確認してみたら、key:"buildSliderFrame",の関数にのみ追加すれば、問題なく動くことがわかりました。
というのが、一連の流れになります。

---

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

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

---

ちょっとした、コード。

HTML

<script>
		var mySiema = new Siema({
			selector: '.siema',
			duration: 500,
			easing: 'ease-out',
			perPage: 2,
			startIndex: 0,
			draggable: true,
			threshold: 20,
			loop: true,
			onInit: () => {},
			onChange: () => {},
		});
				
		document.querySelector('.js-prev1').addEventListener('click', function() {mySiema.prev()});
		document.querySelector('.js-next1').addEventListener('click', function() {mySiema.next()});
			
	setInterval(() => mySiema.next(), 5500);
</script><!-- スクロール自動化 -->
		

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ボタンの表示順序がPCでは横並び、スマホなら縦並びなら、縦並びの時、prevボタンが上に来てしまうので、nextボタンを上に持ってくるCSSです。
参考にしたもの
「display:grid」の使い方について【備忘録】
https://freemas.org/making/css/display-grid

PCでは横並び

スマホなら縦並び
nextを上に持ってきたのが右。