使用按鈕控制引導傳送帶幻燈片

Question

我想使用菜單欄來控制此傳送帶的滾動，其中有按鈕1,2,3,4,5當我點擊它們時，傳送帶應該滑動到第二張幻燈片或第三張幻燈片那樣。

我已經使用了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. 然後使用the .click() method來處理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樹上向上移動一個單層。

• 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>