如何获取轮播的总数和当前幻灯片数
Posted
技术标签:
【中文标题】如何获取轮播的总数和当前幻灯片数【英文标题】：How to Get total and Current Slide Number of Carousel 【发布时间】：2013-07-23 07:30:20 【问题描述】：您能否告诉我如何在引导程序中获取轮播幻灯片的总数和当前数量，如下图所示？
我有一个标准的 Bootstrap 轮播和一个带有 .num 类的 <div> 来显示总数和当前数字，我使用此代码检索数字，但它没有通过
$('.num').html()
$('#myCarousel').carousel(number)
谢谢
更新：
请在这个 jsfiddle LINK 找到一个示例
【问题讨论】：
你用的是哪个轮播插件？ 嗨 Khawer，我正在使用 BootStrap Carousel 你也可以在这里找到一个工作示例：jsfiddle.net/Behseini/QTjET/1 【参考方案1】：每个slide 都有一个.item 类，你可以像这样得到幻灯片的总数
var totalItems = $('.item').length;
活动的slide有一个名为active的类，可以这样获取active slide的索引
var currentIndex = $('div.active').index() + 1;
您可以通过像这样绑定引导轮播slid 事件来更新这些值
$('#myCarousel').bind('slid', function()
currentIndex = $('div.active').index() + 1;
$('.num').html(''+currentIndex+'/'+totalItems+'');
);
EXAMPLE
【讨论】：
我不得不在 BS v3.3.2 中使用$('#my_id').on('slid.bs.carousel', function() ... );
技术上不正确，因为items 的总数可能与实际幻灯片数不同
@pauljm 是的，这也适用于 bootstrap 4，谢谢！该号码未更新为原始答案.....
我曾使用var totalItems = $('.carousel-item').length; 获取BS v5.0 中的silder 总数【参考方案2】：
引导 3.2+：
carouselData.getItemIndex(carouselData.$element.find('.item.active'))
【讨论】：
【参考方案3】：@Khawer Zeshan 的代码更新
对于 Bootstrap 3.0+ 使用 slid.bs.carousel 而不是 slid 和 on 而不是 bind 。所以更新代码会是这样的
var totalItems = $('.item').length;
var currentIndex = $('div.active').index() + 1;
$('#myCarousel').on('slid.bs.carousel', function()
currentIndex = $('div.active').index() + 1;
$('.num').html(''+currentIndex+'/'+totalItems+'');
);
【讨论】：
谢谢！这对我有帮助！【参考方案4】：您可以使用 jquery index() 函数来获取项目列表中活动元素的当前索引。所以代码是这样的：
var currentItem = $("#carousel-1 .item.active" );
var currentIndex = $('#carousel-1 .item').index(currentItem) + 1;
【讨论】：
【参考方案5】：var totalItemsPop = $('#Mycarousel .item').length;
$('#Mycarousel').on('slide.bs.carousel', function()
setTimeout(function()
currentIndexPop = $('#Mycarousel div.active').index() + 1;
$('.num').html('' + currentIndexPop + '/' + totalItemsPop + '');
, 1000);
);
slide 事件后，div 会被激活，并且无法获取活动索引，因此请将代码保持在设置超时功能中
【讨论】：
【参考方案6】：以下代码的唯一缺点是在您转到下一张幻灯片之前它不会显示（在每次幻灯片更改后触发）。
JS/jQuery
$('#carousel-slide').on('slid.bs.carousel', function ()
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getActiveIndex();
var total = carouselData.$items.length;
var text = (currentIndex + 1) + " of " + total;
$('#carousel-index').text(text);
);
HTML
<div id="carousel-index">
<!-- Number will be added through JS over here -->
</div>
【讨论】：
【参考方案7】：Bootstrap 4 和 js
var totalItems = $('.item').length;
var currentIndex = $('div.item.active').index() + 1;
var down_index;
$('.num').html(''+currentIndex+'/'+totalItems+'');
$(".next").click(function()
currentIndex_active = $('div.item.active').index() + 2;
if (totalItems >= currentIndex_active)
down_index= $('div.item.active').index() + 2;
$('.num').html(''+currentIndex_active+'/'+totalItems+'');
);
$(".prev").click(function()
down_index=down_index-1;
if (down_index >= 1 )
$('.num').html(''+down_index+'/'+totalItems+'');
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="num"></div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-wrap="false" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item item active">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" >
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" >
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" >
</div>
</div>
<a class="carousel-control-prev prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>【讨论】：
【参考方案8】：在带有角度的引导程序 5 中
在 html 文件中
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" >
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" >
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" >
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="num"></div><!-- this last line used for showing slide number -->
在css文件中
/** slider css start **/
.carousel-control-prev
margin-left: 80%;
.carousel-control-prev, .carousel-control-next
margin-top: -42px;
bottom: unset;
.carousel-control-prev-icon
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
width: 15px;
height: 15px;
.carousel-control-next-icon
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
width: 15px;
height: 15px;
.carousel-indicators
margin-bottom: 0px;
.carousel-indicators [data-bs-target]
background-color: #cbb06d;
.num
background:#000;
color:#fff;
padding:10px;
width:50px;
text-align:center;
/** slider css end **/
在ts文件中
/** getting slide number start */
var totalItems = $('.carousel-item').length;
var currentIndex = $('div.active').index() + 1;
$('.num').html('' + currentIndex + '/' + totalItems + '');
$('#carouselExampleCaptions').carousel(
interval: 2000
);
$('#carouselExampleCaptions').bind('slid.bs.carousel', function()
currentIndex = $('div.active').index() + 1;
$('.num').html('' + currentIndex + '/' + totalItems + '');
);
/** getting silde number end */
【讨论】：
以上是关于如何获取轮播的总数和当前幻灯片数的主要内容，如果未能解决你的问题，请参考以下文章
Next.js：如何从 getStaticProps 中获取静态资产
关于jquery轮播的问题，如何通过1234标号来控制轮播？
Xcode 5.0.2 中的 iCarousel，一个视图控制器中的多个轮播没有获取轮播的实例