4

Twitter Bootstrap カルーセルを実装しました。1 つの例外を除いて正常に動作します。

すべての写真をスライドさせた後、最後に到達して右矢印を押すと、最初の写真に戻りますが、これが発生したくありません。

右に他の画像がない場合は右矢印を無効にしたいと思います。ユーザーが最初の画像をもう一度見たい場合は、左矢印を押して他のすべての画像を右から左にスライドさせる必要があります。

左矢印についても同じ方法が機能するはずです。つまり、左矢印は最初から無効にして、右矢印をクリックした直後に有効にする必要があります。

つまり、円形ではなく線形効果のようなものです。

この問題の解決策はありますか?

4

2 に答える 2

6

Bootstrap カルーセルはslid.bs.carouseleventを提供します。このイベントは、カルーセルがスライド遷移を完了したときに発生します。

疑似コードでは、答えは次のようになります。

----- 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 に答える