Question

我直接从自助站点有一个香草旋转木马。

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

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

1 2 3 A B

我希望旋转木马自动循环滑动1 2和3，然后重复。但是，如果我点击幻灯片A或B的指示器，我想转到该幻灯片并暂停转盘。

如何将自动旋转限制为仅滑动1 2和3？

Answer 1

如果当前活动的幻灯片是应该重置滑块的幻灯片，您需要在它开始后点击幻灯片事件并告诉它转到第一张幻灯片。
如果当前幻灯片事件是自动播放幻灯片或由滑块控件启动，您还需要存储，因为您希望允许控件转到不受限制的幻灯片
此外，您需要在到达周期重置点之后的任何幻灯片时暂停滑块，如果您在下方，则需要播放滑块（在从暂停的幻灯片返回后重新启动自动播放））。

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

aP（ autoPlaying ）变量存储，
cR（ cycleReset ）存储应重置循环的幻灯片的索引和
sL（ selector ）应该是滑块的选择器。

这是：

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>

引导转盘是否可以仅旋转部分幻灯片？

1 个答案: