bootstrap 旋转木马是否可以只旋转部分幻灯片？

Question

我有一个直接来自 bootstrap 网站的原版轮播。

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

它有 5 张幻灯片和 5 个指标：

1 2 3 A B

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

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

Answer 1

您需要在幻灯片开始后点击幻灯片事件，如果当前活动的幻灯片是应该重置滑块的幻灯片，则告诉它转到第一张幻灯片。
您还需要存储当前幻灯片事件是自动播放幻灯片还是由滑块控件启动，因为您希望允许控件转到不受限制的幻灯片
此外，您需要在播放超过循环重置点的任何幻灯片后暂停滑块，如果低于循环重置点则播放滑块（使其在您 return 后重新开始自动播放来自暂停它的幻灯片）。

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

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

这里是：

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>

bootstrap 旋转木马是否可以只旋转部分幻灯片？

Can a bootstrap carousel rotate through only some of the slides?

jquery

carousel

twitter-bootstrap