7

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

<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
    });
});
4

2 に答える 2

41

イベントを自分で接続できます。

$('.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');
});
于 2013-04-04T19:48:19.193 に答える
3

コメントにコードを貼り付けるのに苦労しました (初心者 :) ) が、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;
});
于 2016-05-02T15:26:17.223 に答える