Twitter Bootstrap 3 Carousel - 删除圆形效果

Question

我已经实现了Twitter Bootstrap轮播.除了一个例外,它工作正常.

在我滑动所有图片后,当我到达最后并按向右箭头时,它再次让我回到第一张图片,但我不希望这种情况发生.

我想在右边没有其他图片的情况下禁用右箭头,如果用户想要再次看到第一张图片,则应按左箭头并从右向左滑动所有其他图片.

同样的方法应该适用于左箭头,这意味着应该从头开始禁用左箭头,并在单击右箭头后启用.

所以它就像线性效果而不是圆形效果.

解决这个问题的任何方法？

Answer 1

Bootstrap carousel提供slid.bs.carousel活动.当转盘完成其滑动过渡时,将触发此事件.

在伪代码中,答案如下:

----- on slide changed (slid.bs.carousel)
  > if active slide is the last one, hide the right control
    > if not, show it
  > if active slide is the first one, hide the left control
    > if not, show it

HTML

<div id="carousel-example-generic" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
    <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide" src="...">
    </div>
    <div class="item">
      <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide" src="...">
    </div>
    <div class="item">
      <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide" src="...">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

jQuery的

// get the carousel
var $carousel = $(".carousel");

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

// get right & left controls
var $rightControl = $carousel.find(".right.carousel-control");
var $leftControl = $carousel.find(".left.carousel-control");

// hide the left control (first slide)
$leftControl.hide();

// get 'slid' event (slide changed)
$carousel.on('slid.bs.carousel', function() {

    // get active slide
    var $active = $carousel.find(".item.active");

    // if the last slide,
    if (!$active.next().length) {
        // hide the right control
        $rightControl.fadeOut();
    // if not,
    } else {
        // show the right control
        $rightControl.fadeIn();
    }

    // if the first slide,
    if (!$active.prev().length) {
        // hide the left control
        $leftControl.fadeOut();
    // if not,
    } else {
        // show it
        $leftControl.fadeIn();
    }
});

的jsfiddle

在旧版本的Bootstrap中,偶数是slid.