bxsliderの画像が1つ飛ばしになるときに確認したいこと

背景

オプション'fade'を使ったbxsliderの画像が1つ飛ばしになってしまい、順番が変わってしまう修正を依頼されました。

原因

index.html

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

script.js

$('#bxslider').bxSlider({
  auto: true,
  mode: 'fade',
  speed: 3000,
  pause: 2000,
  autoDelay: 1000
});

bxsliderのオプション

アニメーション移り変わるspeed > 画像を表示するpause
という数値になっているので、移り変わろうとしている間に次の画像に行こうとしているのが原因かと思います。

解決

script.js

$('#bxslider').bxSlider({
  auto: true,
  mode: 'fade',
  speed: 3000,
  autoDelay: 1000
});

こんな感じで、pause: 2000を消してしまうか、pause: 5000など大きい数値に変更すると解決し、順番は意図したとおりになりました。