2023.6.28

【 JQuery】最後のスライドが最初に表示されるバグの対処法

bxsliderを実装した際、なぜか最後のスライドが最初に表示されるというバグがよく起こります。その対処法についてまとめましたので参照してください。

解決コード

さっそくですが、以下のオプションを実装しているbxsliderに追加してください。

jQuery(function($) {
$('.bxslider').bxSlider({
  minSlides: 1,
  maxSlides: 2,
 });
});

minSlidesとmaxSlidesを記述するだけです。デフォルトでは設定なしになっているので、それぞれ具体的な数を設定してあげます。minSlides（一度に表示させる最小数）を１、maxSlides（一度に表示させる最大数）を２以上にするのがポイントです。

maxSlidesを設定すると表示が崩れてしまうのでは、と思うかもしれませんが大丈夫です。実際に実装したデモページから参照してみてください。

slideWidthでスライドの幅を指定している場合はcssでの調整が必要な場合もあります。そんな時は以下の記事を参考にカスタムしてください

#JQuery･PHP