web-dev-qa-db-ja.com

Bootstrapのカルーセルの特定のアイテムにジャンプするにはどうすればよいですか？

Bootstrapのカルーセルを使用して、リンクをクリックし、カルーセル内の特定のスライドにジャンプできるようにしたいと思います。それ、どうやったら出来るの？どのjqueryを追加する必要がありますか？

これが私のhtmlです（それは機能しませんが、私がやりたいことの感覚をあなたに与えます）：

<a href="#panel">Panel</a>

<div id="myCarousel" class="carousel slide">
 <div class="carousel-inner">
  <div id="panel" class="item">
...
  </div>
 </div>
</div>
jquerytwitter-bootstrapcarousel
14
Elijah Yang

リンクがパネルと同じ順序になっている場合は、次のようにすることができます。

$('.link').on('click', function() {
    $('#carousel').carousel($(this).index());
});

リンクが1つしかない場合は、ハードコーディングします。

var i = 2; //index of the panel    
$('#link').on('click', function() {
    $('#carousel').carousel(i);
});

ドキュメントから：

Methods:

carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

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

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.
21
David Fregoli

私の場合、指定されたスクリプトメソッドは機能しませんでしたが、別の例に基づいて、データタグを使用して機能させることができました

<a data-target="#myCarousel" data-slide-to="0" href="#">First</a>

その点に注意してください data-slide-toインデックスは0に基づいており、これはBootstrap 4でテストされました

3
Sujeev