bxslider、画像が3枚以上になると正常に動作しない

下記のように3枚の画像で設定すると問題なく動作します。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …
<script src="../../topics/js/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
speed: 1500,
pause: 500,
pager: false,
controls: false,
minSlides:2,
maxSlides:3,
infiniteLoop: true
});
});
</script> <script type="text/javascript">
$(document).ready(function(){

$('.bxslider').bxSlider();
});
</script>


<div class="bxslider">
<div><img src="image/image_a.jpg"/></div>
<div><img src="image/image_b.jpg"/></div>
<div><img src="image/image_c.jpg"/></div>
</div>



ですが、枚数を増やし、下記のようにすると1つの画像を2連続で再生したり、2秒ほど真っ白になってまた動き出すなど、正常に動作しません。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …
<script src="../../topics/js/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
speed: 1500,
pause: 500,
pager: false,
controls: false,
minSlides:2,
maxSlides:5,
infiniteLoop: true
});
});
</script> <script type="text/javascript">
$(document).ready(function(){

$('.bxslider').bxSlider();
});
</script>


<div class="bxslider">
<div><img src="image/image_a.jpg"/></div>
<div><img src="image/image_b.jpg"/></div>
<div><img src="image/image_c.jpg"/></div>
<div><img src="image/image_d.jpg"/></div>
<div><img src="image/image_e.jpg"/></div>
</div>


理由がわかる方、ご教授いただけると助かります。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2021/03/18 13:12

No1です。

＞知識がなく拾ってきたものをそのまま使っているのですが、
そのままが、載っていたとは到底思えませんけれど・・・？

＞<script src="../../topics/js/jquery.bxslider.min.js"></script>
＞を消すということでしょうか？
違います。
No1にも書きましたが、どうしたいのかによるので、こちらではわかりませんけれど、例えば以下を削除するとか。（もう一方を削除しても良いですけれど）

</script> <script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>

No.1 回答者： fujillin 回答日時： 2021/03/15 20:56

こんばんは

＞下記のように3枚の画像で設定すると問題なく動作します。
う～～ん。
問題なくはないと思いますが、目立たないだけでは？

＞理由がわかる方、ご教授いただけると助かります。
オプションをどうしたいのかわからないけれど、二重設定をやめればよいだけのような気がします。
二つ目のスクリプトを外せばちゃんと動きませんか？

この回答へのお礼

回答ありがとうございます。
知識がなく拾ってきたものをそのまま使っているのですが、

<script src="../../topics/js/jquery.bxslider.min.js"></script>

を消すということでしょうか？

お礼日時：2021/03/18 11:27