Question

我实施了Twitter Bootstrap轮播。除了一个例外，它工作正常。

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

如果右边没有其他图片，我想禁用右箭头，如果用户想再次看到第一张图片，则应按左箭头并向右滑动所有其他图片离开了。

同样的方法适用于左箭头，这意味着左箭头应该从头开始，并在点击右箭头后启用。

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

针对此问题的任何解决方案？

Answer 1

Bootstrap carousel provides slid.bs.carousel event。 当轮播完成幻灯片转换时会触发此事件。

在伪代码中，答案如下：

----- 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。

Answer 2

这是一种更简单的方法：使用'wrap'选项。

在你的js中，当发射旋转木马时：

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

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

<div id="carousel-example-generic" class="carousel slide" data-wrap="false">

Twitter Bootstrap 3 Carousel - 删除圆形效果

2 个答案:

HTML

的jQuery