jquery - Bootstrap 轮播可以仅旋转部分幻灯片吗？

Question

我有一个直接来自 Bootstrap 站点的普通轮播。

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

它有 5 张幻灯片和 5 个指示器:

1 2 3 A B

我希望轮播能够自动循环播放幻灯片 1、2 和 3，然后重复。但是，如果我单击幻灯片 A 或 B 的指示器，我想移至该幻灯片并暂停轮播。

如何将自动旋转限制为仅幻灯片 1、2 和 3？

Answer 1

1. 您需要在幻灯片事件开始后立即点击该事件，并告诉它转到第一张幻灯片(如果当前事件的幻灯片是应重置 slider 的幻灯片)。
2. 您还需要存储当前幻灯片事件是自动播放幻灯片还是由 slider 控件启动，因为您希望允许控件转到否则无法访问的幻灯片
3. 此外，您需要在到达超过循环重置点的任何幻灯片后暂停 slider ，并在低于循环重置点时播放 slider (以使其在从暂停的幻灯片返回后重新开始自动播放) )。

但显然，Bootstrap 轮播不喜欢从现有幻灯片事件内部启动新的幻灯片事件，因此我们需要在当前幻灯片事件上调用 .preventDefault() 才能启动另一个。

aP (autoPlaying) 变量存储当前幻灯片事件是否已通过与 slider 控件交互启动，
cR (cycleReset) 存储应重置循环的幻灯片的索引，并
sL(选择器)应该是 slider 的选择器。

这里是:

var sL = '#z', // slider selector
    aP = true, // autoPlaying
    cR = 2;    // cycleReset

$(sL)
    .on('click', '.carousel-indicators,.carousel-control', function() {
        // autoplaying off when a control is clicked
        aP = false;
    })
    .on('slide.bs.carousel', function(e) {
        // if on the cycle reset slide and auto-playing...
        if (($(sL + ' .active').index() == cR) && aP) {
            // ...we stop the current slide event...
            e.preventDefault();
            // ...turn off autoplaying (to prevent an infinite loop)...
            aP = false;
            // ...and go to first slide;
            $(sL).carousel(0)
        } else {
            // or we set auto-playing true (for next slide event).
            aP = true;
        }
    })
    .on('slid.bs.carousel', function(e) {
        // when a slide event finished, if we arrived on a slide
        // that's after the cycle reset slide, we pause the slider
        // otherwise we play (cycle) it
        $(sL).carousel($(sL + ' .active').index() > cR ? 'pause' : 'cycle');
    });

工作示例:

var sL = '#z',
    aP = true,
    cR = 2;

$(sL)
    .on('click', '.carousel-indicators,.carousel-control', function() {
        aP = false;
    })
    .on('slide.bs.carousel', function(e) {
        if (($(sL + ' .active').index() == cR) && aP) {
            e.preventDefault();
            aP = false;
            $(sL).carousel(0)
        } else {
            aP = true;
        }
    })
    .on('slid.bs.carousel', function(e) {
        $(sL).carousel($(sL + ' .active').index() > cR ? 'pause' : 'cycle');
    });

body {margin: 0;}
.item img {
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="z" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#z" data-slide-to="0" class="active"></li>
    <li data-target="#z" data-slide-to="1"></li>
    <li data-target="#z" data-slide-to="2"></li>
    <li data-target="#z" data-slide-to="3"></li>
    <li data-target="#z" data-slide-to="4"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://lorempixel.com/g/600/210/fashion" alt="Chania">
    </div>

    <div class="item">
      <img src="http://lorempixel.com/g/600/210/fashion" alt="Chania">
    </div>

    <div class="item">
      <img src="http://lorempixel.com/g/600/210/fashion" alt="Flower">
    </div>

    <div class="item">
      <img src="http://lorempixel.com/g/600/210/fashion" alt="Flower">
    </div>
    
    <div class="item">
      <img src="http://lorempixel.com/g/600/210/fashion" alt="Flower">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#z" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#z" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>