• 文字サイズ
解決済

カラーミーbxsliderの複数画像表示について

  • 相談者:非公開
  • 2018/12/11 12:03
お世話になります。

こちらのページ(https://shop.marianaocean.com/)にbxsliderを用いたスライドショーを2つ入れたいのですが、2つめのライドショーに複数枚の画像を表示させるコード「slideWidth、minSlides、maxSlides、moveSlides」の記述を追記すると崩れてしまいます。ご教授いただけましたら幸いです。

<やりたいこと>
・画像をPC画面では4つ表示、スマホ画面では2つ横並び表示
・1枚ずつスライド
・PC画面での1枚の画像サイズは現状と同じでよいが、スマホでは半分くらいのサイズにしたい
です。


複数枚の画像を表示させるコードは、下記のサイトを参考にしています。
※bxSliderのカルーセルに必要なオプション設定、「複数枚の画像を常に表示するタイプのカルーセルにカスタマイズしたいの場合に最低必要なオプションは、「slideWidth、minSlides、maxSlides、moveSlides」です。」
https://stand-4u.com/plugin/bxslider.html


記述した内容は以下の通りです。
----------------------
<script type="text/javascript">
$(document).ready(function(){
$('.slider4').bxSlider();
});

</script>

<script type="text/javascript">
$(document).ready(function(){
$('#slider4').bxSlider({
auto: true,
pager: true,
easing: 'easeOutBounce',
slideWidth:300,
minSlides:2,
maxSlides;4,
moveSlides:1,
});
});
</script>
<div id="slider4">
<div><img src="https://img21.shop-pro.jp/PA01358/294/etc/contents_xmas.jpg?cmsp_timestamp=20181130154955" width="300px"></div>
<div><img src="https://img21.shop-pro.jp/PA01358/294/etc/contents_wedding.jpg?cmsp_timestamp=20181130155022" width="300px"></div>
<div><img src="https://img21.shop-pro.jp/PA01358/294/etc/contents_baby.jpg?cmsp_timestamp=20181130155035" width="300px"></div>
<div><img src="https://img21.shop-pro.jp/PA01358/294/etc/contents_line.jpg?cmsp_timestamp=20181130155046" width="300px"></div>
</div>
----------------------

よろしくお願いいたします。
投稿内容について報告する




  • 返信者:非公開
  • 2018/12/11 14:20
ECマスターズの田中です。

いただいたページに既に実装されており、
私のiPhone8にて確認したところ、
添付画像のとおり、問題なく表示されているこ………(省略)………