今回Siemaをスマホ対応させてみたメモになります。
前提として、
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
↧