お世話になります。

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

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


複数枚の画像を表示させるコードは、下記のサイトを参考にしています。
※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>
----------------------

よろしくお願いいたします。