bxslider レスポンシブで表示数を変更したい

Question

レスポンシブのサイトで、bxsliderを使いたいと考えています。
PCでは3項目表示させ、スマホでは1項目のみ表示したいのですが、設定の仕方が解らずに困っています。

pcでは問題なく3項目表示されるのですが、スマホ表示にすると崩れて2項目が重なって表示されてしまいます。

現在のコードは以下です。

<script>
    jQuery(function() {
    $('.bxslider').bxSlider({
responsive: true,
        slideWidth:240,
        //pager: false,
        minSlides: 1,//一度に表示させる画像の最小値
        maxSlides: 3,//一度に表示させる画像の数
        slideMargin:60,
        });
      });
</script>

<ul class="bxslider">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

色々調べてみたのですが、記載されているサイト等もほとんど見つからず困っています。

どなたかご教授ください。
どうかよろしくお願いします。

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

[korokorota]

失礼しました！
ご指摘ありがとうございます。
解決済みにいたします。

Answer 1

試してないので違ったら申し訳ないですが、bxsliderのレスポンシブ設定にはバグがあるようなことを記載されているブログが複数ありました。

・参考１
・参考２

pcでは問題なく3項目表示されるのですが、スマホ表示にすると崩れて2項目が重なって表示されてしまいます。

上記ブログではこの現象とは違って1枚表示にはなっているようなのでもしかしたら違うかもしれませんが、
PC/SPで表示枚数を変えたい場合にバグがありそうな雰囲気なので、参考にしてみると良いかもしれません。
（個人的には参考１のサイトのほうが分かりやすかったです。）

Comments

[korokorota]

回答ありがとうございます！
参考サイトも載せていただき、ありがとうございます。

参考2のサイトの対応策の「旧バージョン」を試したところきちんと表示されました！
ありがとうございます、助かりました！！
参考1とは現象は違いますが、解説を読んでトライしてみたいと思います。
ありがとうございました！！

[aKusano]

解決したら「解決済」にしてくださいねー

[korokorota]

失礼しました！
解決済みにします。