768px以下の表示になったときに、スライダーのサムネイルの表示がおかしくなります。
OSはwindows、Mac共で、
safari,IE,Chrome,FireFoxどのブラウザでも、「768px」以下の状態(スマホビュー)にしたときに、この現象が現れます。
わかるようにサンプルのページを作成しました。
スライドサムネイルの部分は、
html
1<ul class="slider" style="width: 3348px; top: 0px; left: -1116px;"> 2<li data-slide-id="0" class="org-item" style="width: 88px;"><a href="#"><img src="images/temp/sample1.jpg"></a></li> 3<li data-slide-id="2" class="org-item" style="width: 88px;"><a href="#"><img src="images/temp/sample2.jpg"></a></li> 4<li data-slide-id="3" class="org-item" style="width: 88px;"><a href="#"><img src="images/temp/sample3.jpg"></a></li> 5<li data-slide-id="4" class="org-item" style="width: 88px;"><a href="#"><img src="images/temp/sample4.jpg"></a></li> 6<li data-slide-id="5" class="org-item" style="width: 88px;"><a href="#"><img src="images/temp/sample5.jpg"></a></li> 7</ul>
しか記述していないのですが、
768px以下になると、
下記のように、サムネイル画像が3行になってしまっています。
開発者ツールで内容をみると、ソース以外の data-slide-id が付番され、
そのために、このように3行になってしまっているようです。
スライダーのスクリプトはGitHubに記載しました。
(文字数制限上、ここに入れれませんでした)
どこを修正するとよいのでしょうか?
申し訳ございませんが、教えていただけるとありがたいです!
どうぞよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー