计算轮播项目和暂停问题

Question

我想计算轮播项目和特定项目暂停间隔然后循环。 但我不能得到物品ID！

由于

$('.carousel').on('slid.bs.carousel', function () {

  console.log($(".item.active").prevAll().length);

  if($(".item.active").prevAll().length == 5) {  //  5 =  slide indexi 

    $('.carousel').carousel('pause');

    setTimeout(function() {

      $('.carousel').carousel('cycle');

    },5000);

  }

});

Answer 1

使用index

  

如果在元素集合上调用.index（）并传入DOM元素或jQuery对象，.index（）将返回一个整数，指示传递元素相对于原​​始集合的位置

所以你可以使用：

if($(".item.active").index() == 5) {  //  5 =  slide index (starting from 0)

在您的情况下，索引值为0到5。

修改

我附上了一个实例。请注意，带有索引5的幻灯片的总显示时间是轮播间隔和milliseconds setTimeout参数（我设置为10000）的总和。因此，在我的示例中，索引为5的幻灯片将显示15秒（默认轮播间隔为5000）。

＆＃13;

＆＃13;

$('.carousel').on('slid.bs.carousel', function() {

  console.log($(".item.active").index());

  if ($(".item.active").index() === 5) { //  5 =  slide index 

    $('.carousel').carousel('pause');

    setTimeout(function() {

      $('.carousel').carousel('cycle');

    }, 10000);

  }

});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Carousel Example</h2>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
      <li data-target="#myCarousel" data-slide-to="4"></li>
      <li data-target="#myCarousel" data-slide-to="5"></li>
      <li data-target="#myCarousel" data-slide-to="6"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Los Angeles" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>

    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>

  </div>
</div>
<div class="num"></div>

＆＃13;

＆＃13;

＆＃13;

修改2

基于对此答案的评论的新解决方案

＆＃13;

＆＃13;

var cycleCount = 0;

// Pause on the 3rd cycle when slide with index 2 is shown
var cycleCountPause = 3;
var slideIndexPause = 2;
var pauseInterval = 10000;

var $carousel = $('.carousel');

var slidesCount = $carousel.find('.carousel-inner .item').length;

$carousel.on('slid.bs.carousel', function() {

  var activeIndex = $carousel.find(".item.active").index();

  if (cycleCount === cycleCountPause && activeIndex === slideIndexPause) {
    $carousel.carousel('pause');

    setTimeout(function() {
      $carousel.carousel('cycle');
    }, pauseInterval);
  }

  if (activeIndex === slidesCount - 1) {
    cycleCount++;
  }

});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Carousel Example</h2>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
      <li data-target="#myCarousel" data-slide-to="4"></li>
      <li data-target="#myCarousel" data-slide-to="5"></li>
      <li data-target="#myCarousel" data-slide-to="6"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Los Angeles" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>

    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>

  </div>
</div>
<div class="num"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

参见本工作演示：

最初我们设定间隔为1秒， 然后在slid.bs.carousel

  

slid.bs.carousel：轮播完成后会触发此事件   它的幻灯片过渡。

我们将索引1的第2张幻灯片暂停5秒钟，然后循环转盘。

$('.carousel').carousel({
  interval: 1000
})


$('#carouselExampleControls').on('slid.bs.carousel', function () {
  var total= $('div.carousel-item').length;
  var currentIndex = $('div.active').index();
  if(currentIndex==1){
  
    $('#carouselExampleControls').carousel('pause');
    setTimeout(function() {
      $('.carousel').carousel('cycle');
    },5000);

  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>


<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="http://more-cliparts.net/images/6ir5EAgAT.png">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://www.clker.com/cliparts/y/G/s/h/j/O/two-md.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://www.competitivefutures.com/wp-content/uploads/2015/04/three.png" alt="Third slide">
    </div>
    
     <div class="carousel-item">
      <img class="d-block w-100" src="http://www.analyticalones.com/wp-content/uploads/2015/01/four.png" alt="Fourth slide">
    </div>
    
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>