35

您能否让我知道如何在引导程序中获取轮播幻灯片的总数和当前数量，如下图所示？

显示当前页面和总页数的图像

我有一个标准的 Bootstrap 轮播和一个用于显示总数和当前数字<div>的.num类，我使用此代码检索数字但它没有通过

$('.num').html(){
  $('#myCarousel').carousel({number})
}

谢谢

更新：

请在此 jsfiddle链接中找到示例

4

8 回答 8

82

每个slide都有一个.item类，您可以获得这样的幻灯片总数

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

Activeslide有一个名为 as 的类active，可以这样获取active slide索引

var currentIndex = $('div.active').index() + 1;

您可以通过像这样绑定引导轮播slid事件来更新这些值

$('#myCarousel').bind('slid', function() {
    currentIndex = $('div.active').index() + 1;
   $('.num').html(''+currentIndex+'/'+totalItems+'');
});

例子

于 2013-07-24T18:01:37.177 回答
18

@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+'');
});
于 2015-07-31T17:20:05.133 回答
6 
var totalItemsPop = $('#Mycarousel .item').length; 
$('#Mycarousel').on('slide.bs.carousel', function() {
       setTimeout(function(){ 
            currentIndexPop = $('#Mycarousel div.active').index() + 1;
            $('.num').html('' + currentIndexPop + '/' + totalItemsPop + '');
         }, 1000);
   });

在滑动事件之后，div 将处于活动状态并且无法获取活动索引，因此请将您的代码保持在设置超时功能内

于 2016-07-26T09:09:08.157 回答
4

引导程序 3.2+：

carouselData.getItemIndex(carouselData.$element.find('.item.active'))
于 2014-12-02T10:47:46.853 回答
1

引导 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" alt="First slide">
    </div>
    <div class="carousel-item item">
      <img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Second slide">
    </div>
    <div class="carousel-item item">
      <img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Third slide">
    </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>

于 2019-04-03T12:10:22.510 回答
1

以下代码的唯一缺点是它不会显示，直到您转到下一张幻灯片（每次幻灯片更改后触发）。

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>
于 2016-11-21T13:08:41.050 回答
0

在带有角度的引导程序 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" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </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 */
于 2021-09-23T12:19:45.487 回答
0

您可以使用 jquery index() 函数来获取项目列表中活动元素的当前索引。所以代码看起来像这样：

var currentItem = $("#carousel-1 .item.active" );
var currentIndex = $('#carousel-1 .item').index(currentItem) + 1;
于 2015-09-15T11:04:26.540 回答