4

ブートストラップ カルーセルを設置しました。次のスライドと前のスライドは正しく機能しますが、スライドのリンクは同じではありません。

以下は、スライドのリンクを含むカルーセルの例です。

<!-- Carousel -->
<div id="seriesCarousel" class="carousel slide">
 <div class="container">
  <div class="carousel-inner">
    <div class="item" data-id="2">
       <article>
       </article>
    </div>
    <div class="item" data-id="5">
       <article>
       </article>
    </div>
  </div>
 </div>
</div>

<!-- Slides' links -->
<div class="accordion-inner">
 <ul>
  <li data-target="#seriesCarousel" data-slide-to="2">
   <a href="javascript: void(0);"> name 1</a>
  </li>
  <li data-target="#seriesCarousel" data-slide-to="5">
   <a href="javascript: void(0);"> name 2</a>
  </li>
 </ul>
</div>

data-slide-toタグに特定の番号をリンクに付けたいと思います。次に、 data-slide-to に存在するスライド番号 ( data-id )を指す必要があります。

私が開発したソリューションでは機能せず、リンクはカルーセル配列要素を指しており、そのdata-idタグを指していません。たとえば、data-slide-id番号が 1 の場合、カルーセルの配列の要素番号 1 を指します。

リンクが特定のスライドを指すようにする方法はありますか?

4

2 に答える 2

8

私はあなたが何をしようとしているのか理解できないと思います。を使用してデフォルトの機能をオーバーライドするjQueryで何かを実行してdata-slide-to、正しい画像を取得できます..

$('.carousel-indicators li').click(function(e){
    e.stopPropagation();
    $('#myCarousel').carousel($(this).data('slide-to')-1); 
});

リンクを並べると

http://www.bootply.com/94396

リンクが順番に並んでいません..

http://www.bootply.com/94397

ただし、ブートストラップ カルーセルは画像を順番に表示するように設計されており、対応するリンクが表示されている画像がアクティブに設定されています。したがって、3 番目のリンクをクリックして 2 番目のリンクを開くことができますが、2 番目のリンクは次のように設定されます。アクティブ..この機能もオーバーライドできます。ただし、次のボタンと前のボタンを使用するときに混乱を招く可能性があるため、なぜそれを行うのかわかりません。

更新 2

$('.carousel-indicators li').click(function(e){
    e.stopPropagation();
    var goTo = $(this).data('slide-to');
  $('.carousel-inner .item').each(function(index){
    if($(this).data('id') == goTo){
      goTo = index;
      return false;
    }
  });

    $('#myCarousel').carousel(goTo); 
});

例

http://www.bootply.com/97089

あなたにとっては、次のようになります。

$('.menu-right-club .accordion-inner li').click(function(e){
     e.stopPropagation();
     var goTo = $(this).data('slide-to');
     $('#seriesCarousel .carousel-inner .item').each(function(index){
         if($(this).data('id') == goTo){
             goTo = index;
             return false;
         } 
     });            
    $('#seriesCarousel').carousel(goTo); 
});
于 2013-11-15T17:02:00.927 に答える
1

以下のように、 「carousel-inner」クラスを使用してリンク (カルーセル インジケーター) を div のすぐ外側に配置すると、かなりうまく機能します。

** ここでは、カルーセル インジケーターが順序付きリストになっています。

  <div class="carousel slide" id="theCarousel" data-interval="3000">
        <ol class="carousel-indicators">
        <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#theCarousel" data-slide-to="1"></li>
        <li data-target="#theCarousel" data-slide-to="2"></li>
        </ol>

            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar%201.JPG" alt="1" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">Resting In Style</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
                <div class="item ">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar%202.JPG" alt="2" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">The Dude Look</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
                <div class="item ">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar.JPG" alt="3" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">How z It??</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
            </div> 
            <a href="#theCarousel" class="carousel-control left" data-slide="prev">
                    <span class="icon-prev"></span>
                </a>
            <a href="#theCarousel" class="carousel-control right" data-slide="next">
                    <span class="icon-next"></span>
                </a>            
    </div>

ただし、カルーセル要素の外側にインジケーターを配置すると、クリックしてナビゲートできますが、アクティブなスライドのデフォルトの表示は機能しません。

これは、カルーセル画像スライドrの作品です。見ることができます

于 2014-01-09T12:36:01.250 に答える