gpt4 book ai didi

javascript - 对于 Bootstrap 4 Carousel,点击下一步时第一张幻灯片计数不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 00:42:26 24 4
gpt4 key购买 nike

我正在尝试获取幻灯片/总计数并以某种方式让它工作。但是,当我单击 next 并返回到原始的第一张幻灯片时,它不显示 1/4 但它仍然是 4/4.

JSFiddel:https://jsfiddle.net/zorw7yLe/

HTML:

<div class="num"></div>
<a class="next" href="#carouselExampleIndicators" role="button" data-slide="next"> -->>></a>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item item active">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="First slide">
<div class="carousel-caption">
<h5>Title of the first image</h5>
<p>Some description of the first image</p>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Second slide">
<div class="carousel-caption">
<h5>Title of the second image</h5>
<p>Some description for the second image</p>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Third slide">
<div class="carousel-caption">
<h5>Title of the third image</h5>
<p>Some description for the third image</p>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Fourth slide">
<div class="carousel-caption">
<h5>Title of the fourth image</h5>
<p>Some description for the fourth image</p>
</div>
</div>
</div>
</div>

JS:

var totalItems = $('.carousel-item').length;
var currentIndex = $('.carousel-item.active').index() + 1;
var down_index;
$('.num').html(''+currentIndex+'/'+totalItems+'');

$(".next").click(function(){
currentIndex_active = $('.carousel-item.active').index() + 2;
if (totalItems >= currentIndex_active)
{
down_index= $('.carousel-item.active').index() + 2;
$('.num').html(''+currentIndex_active+'/'+totalItems+'');
}
});

最佳答案

我建议你使用 bootstrap 轮播事件,你不需要直接在你的链接上观看点击:

https://getbootstrap.com/docs/4.0/components/carousel/#events

var totalItems = $('.carousel-item').length; 

$('#carouselExampleIndicators').on('slide.bs.carousel', function (e) {
$('.num').html((e.to+1)+'/'+totalItems);
});

因此您的计数器将跟踪当前幻灯片

此外,由于您的条件 (totalItems >= currentIndex_active),您的计数器不会回到 1/4,在最后一张幻灯片中,如果您在索引上添加 +2,则为 5,高于 totalItems (4 )

你需要一个 else 来最终得到正确的数字,但只需使用 Bootstrap 事件

关于javascript - 对于 Bootstrap 4 Carousel,点击下一步时第一张幻灯片计数不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58040150/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com