引导转盘是否可以仅通过部分滑轨旋转？ [英] Can a bootstrap carousel rotate through only some of the slides?

问题描述

我直接从引导网站有一个香草转盘。

I have a vanilla carousel straight from the bootstrap site.

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

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

It has 5 slides with 5 indicators:

1 2 3 A B

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

I would like the carousel to automatically loop through slides 1 2 and 3, then repeat. However, if I click on the indicators for slides A or B, I would like to move to that slide and pause the carousel.

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

How can I limit the auto rotate to just slides 1 2 and 3?

推荐答案

1. 您需要点击幻灯片事件，就在它启动后告诉它去如果当前活动的幻灯片是应该重置滑块的幻灯片，则首先滑动。


2. 如果当前幻灯片事件是自动播放幻灯片或由滑块控件启动，您还需要存储，因为您希望允许控件转到不受限制的幻灯片


3. 此外，您需要在经过周期重置点后到达任何幻灯片时暂停滑块，如果您在下方，则需要播放滑块（以使其在您之后重新启动自动播放）从暂停它的幻灯片返回）。

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

But apparently, Bootstrap carousel doesn't like a new slide event to be initiated from inside an existing one, so we need to call .preventDefault() on the current one to be able to initiate another.

aP （ autoPlaying ）变量存储是否已通过与滑块控件的交互启动当前幻灯片事件，

cR （ cycleReset ）存储应重置周期的幻灯片的索引和

sL （ selector ）应该是滑块的选择器。

aP (autoPlaying) variable stores if the current slide event has been initiated by interaction with a slider control,
cR (cycleReset) stores the index of the slide that should reset the cycle and
sL (selector) should be your slider's 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>

这篇关于引导转盘是否可以仅通过部分滑轨旋转？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！