ボタンを使用してブートストラップカルーセルスライドを制御する

Question

ボタンをクリックするとメニューバーを使用してこのカルーセルのスクロールを制御したい場合は、カルーセルを2番目のスライドまたは3番目のスライドにスライドする必要があります。

私はHTML、Bootstrap、CSSを使用しています。

<div class="container-fluid"> 

    <div class="row" id="row1"> 
     <div class="col-sm-12" style="top: 10%; bottom: 50%;"> 
      <h1>AS</h1> 
     </div> 
    </div> 

    <div class="row" id="row2"> 
     <div class="col-sm-4" style="top: 10%; bottom: 50%; background-color: white; height: 7.4vh"> 
      <h1 style="color: black">AS</h1> 
     </div> 
     <div class="col-sm-8" style="top: 10%; bottom: 50%; background-color: black"> 
      <div class="nav"> 
       <ul> 
        <li class="contact"><a href="#one">1</a></li> 
        <li class="contact1"><a href="two">2</a></li> 
        <li class="about"><a href="#three">3</a></li> 
        <li class="about1"><a href="#four">4</a></li> 
        <li class="tutorials"><a href="#five">5</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <div class="row" id="row3"> 
     <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox" style="vertical-align: top; position: absolute; background-color:green"> 
       <div class="item active" id="one"> 
        <h1>ABC</h1> 
       <div class="item" id="two"> 
        <img src="img/B.jpg" alt="Chania"> 
       </div> 

       <div class="item" id="three"> 
        <img src="img/C.jpg" alt="Flower"> 
       </div> 

       <div class="item" id="four"> 
        <img src="img/C.jpg" alt="Flower"> 
       </div> 

       <div class="item" id="five"> 
        <img src="img/C.jpg" alt="Flower"> 
       </div> 
      </div> 

      <!-- Left and right controls --> 
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon glyphicon-menu-left" aria-hidden="true"></span> 
      </a> 
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon glyphicon-menu-right" aria-hidden="true"></span> 
      </a> 
     </div> 

    </div> 

    <div class="row" id="row4"> 
     <div class="col-sm-12" style="top: 10%; bottom: 50%;"> 
      <button class="button" onclick="Contact">Contact</button> 
     </div> 
    </div> 

</div> 

Answer 1

わかりません...ご確認ください。それはあなたが達成したいものですか？

1. あなたは別のスライドに画像を配置することができます。

2. を使用して、clickのJavaScriptイベントを処理します。

3. およびコールthe .carousel(number) method：

   サイクル（アレイと同様ベース0、）特定のフレームにカルーセル。

も参照してください：

• the .eq() method

  指定されたインデックスのいずれかにマッチした要素のセットを減らします。

• the .index() method

  引数が.index()メソッドに渡されていない場合、戻り値は、その兄弟要素にjQueryオブジェクトの相対内の最初の要素の位置を示す整数です。

• the .find() method

  子孫< ...>セレクタ<によってフィルタリング...>

• the .children() method

  はそれぞれの子供をゲットマッチした要素のセット内の要素、オプションでfilセレクターによって調整されます。

  <

  the .parent() method

...> DOMツリー内のこれらの各要素の直接の親に横断し、マッチング要素から新しいjQueryオブジェクトを構築します。
< ...> DOMツリーを1レベル上に移動します。

• the .prev() method

  ゲット直前<兄弟...>たとえば

：http://codepen.io/glebkema/pen/qayLYY

var myCarousel = $('#myCarousel'); 
 
var myNav = myCarousel.prev(); 
 

 
myNav.find('li > a').click(function() { 
 
    var newIndex = $(this).parent().index(); 
 
    myCarousel.carousel(newIndex); 
 
}); 
 

 
myCarousel.on('slid.bs.carousel', function() { 
 
    var newIndex = $(this).find('.carousel-inner>.active').index(); 
 
    var newLI = myNav.children().eq(newIndex); 
 
    if (!newLI.hasClass('active')) { 
 
    myNav.find('li.active').removeClass('active'); 
 
    newLI.addClass('active'); 
 
    } 
 
});

/* Make the images wide and responsive. */ 
 
.carousel-inner img { 
 
    height: auto; 
 
    width: 100%; 
 
} 
 

 
/* Count nav-pills */ 
 
.nav { 
 
    counter-reset: number; 
 
    padding: 12px 0; 
 
} 
 
.nav > li > a:before { 
 
    content: counter(number); 
 
    counter-increment: number; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 

 
    <ul class="nav nav-pills"> 
 
    <li role="presentation" class="active"><a href="#"></a></li> 
 
    <li role="presentation"><a href="#"></a></li> 
 
    <li role="presentation"><a href="#"></a></li> 
 
    <li role="presentation"><a href="#"></a></li> 
 
    <li role="presentation"><a href="#"></a></li> 
 
    <li role="presentation"><a href="#"></a></li> 
 
    </ul> 
 

 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="//placehold.it/900x300/c69/fff/?text=1" alt=""> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="//placehold.it/900x300/9c6/fff/?text=2" alt=""> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="//placehold.it/900x300/69c/fff/?text=3" alt=""> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="//placehold.it/900x300/c33/fff/?text=4" alt=""> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="//placehold.it/900x300/099/fff/?text=5" alt=""> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="//placehold.it/900x300/f93/fff/?text=6" alt=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>