web-dev-qa-db-ja.com

Bootstrapカルーセルの次および前の関数が機能しない

最新バージョンを使用し、基本的なカルーセルを持っています。すべてのデフォルト設定で動作しますが、特定の機能を追加または停止しようとすると、問題が発生するか、まったく機能しません。画像を手動で循環できるようにしたい。自動サイクルさせたくない。次へと前へのボタンを使って循環したい。私はここでいくつかの投稿を読みましたが、解決策は助け/機能しません。

<div id="myCarousel" class="carousel slide">

<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
     <ul class="thumbnails">
         <li>Img</li>
         <li>Img</li>
         <li>Img</li>
     </ul>
</div>
<div class="item">
      <ul class="thumbnails">
         <li>Img</li>
         <li>Img</li>
         <li>Img</li>
     </ul>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

$('#myCarousel').each(function() {
    $(this).carousel({
        interval: false
    });
});
jquerytwitter-bootstrapcarousel
6
alyus

イベントを自分で配線することができます。

$('.carousel-control.left').click(function() {
  $('#myCarousel').carousel('prev');
});

$('.carousel-control.right').click(function() {
  $('#myCarousel').carousel('next');
});

もちろん、data-slideを使用することもできますが、何をしたいかによって異なります。上記と同じことをするこのような何か。

$('a[data-slide="prev"]').click(function() {
  $('#myCarousel').carousel('prev');
});

$('a[data-slide="next"]').click(function() {
  $('#myCarousel').carousel('next');
});
39
lucuma

コメントにコードを貼り付けるのに少し苦労しましたが（初心者:)）、Lucumaの投稿を受け取り、前のリンクと次のリンクの両方がインラインページアンカーとして機能しないようにコードを追加しました。以下のコードを使用して、それが発生しないようにしますが、それでも必要に応じて前後にスライドします。

// Fixes the prev/next links of the sliders
$('.carousel-control.left').click(function(e) {
  e.stopPropagation();
  $('.js-carousel').carousel('prev');
  return false;
});

$('.carousel-control.right').click(function(e) {
  e.stopPropagation();
  $('.js-carousel').carousel('next');
  return false;
});
2
Anneke Sinnema