4

我已经实现了一个 Twitter Bootstrap 轮播。它工作正常，但有一个例外。

滑动完所有图片后，当我到达最后并按右箭头时，它又让我回到第一张图片，但我不希望这种情况发生。

当右侧没有其他图片时，我想禁用右箭头，如果用户想再次查看第一张图片，他应该按左箭头并从右向左滑动所有其他图片。

同样的方式应该适用于左箭头，这意味着左箭头应该从一开始就被禁用，并在单击右箭头后启用。

所以它有点像线性效果而不是圆形。

这个问题有什么解决办法吗？

4

2 回答 2

6

引导轮播提供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.

于 2013-11-13T08:28:33.937 回答
2

这里有一个更简单的方法：使用 'wrap' 选项。

在您的 js 中，当触发轮播时：

$('#carousel-example-generic').carousel({
  wrap: false
});

或者，如果您不喜欢摆弄 js，您也可以直接在 HTML 中使用 'data' 属性进行配置：

<div id="carousel-example-generic" class="carousel slide" data-wrap="false">
于 2014-07-18T13:10:02.160 回答