如何使按钮像轮播指示器一样工作答案

【问题标题】：how to make button works like carousel-indicators如何使按钮像轮播指示器一样工作
【发布时间】：2016-10-18 23:54:47
【问题描述】：

嗨，我的页面上有轮播，我正在将按钮添加到滑块中，我想让单击时的按钮更改为下一张幻灯片，就像轮播指示器一样，但我不知道该怎么做，所以它会如果有人向我解释如何......这是我的轮播代码

<section id="slide" class="text-center">
       <div class="container">
           <div id="mycarousel" class="carousel slide" data-ride="carousel">
               <ol class="carousel-indicators">
                   <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
                   <li data-target="#mycarousel" data-slide-to="1"></li>
                   <li data-target="#mycarousel" data-slide-to="2"></li>
               </ol>
               <div class="carousel-inner">
                   <div class="item active">
                       <h1>Head Line</h1>
                       <p>Paragraph</p>
                       <button type="button" class="btn btn-success"> button </button>
                   </div>
                   <div class="item">
                       <h1>Head Line 2</h1>
                       <p>Paragraph 2</p>
                       <button type="button" class="btn btn-success">button2</button>
                   </div>
                   <div class="item">
                       <h1>Head Line 3</h1>
                       <p>Paragraph 3</p>
                       <button type="button" class="btn btn-success">button3</button>
                   </div>
               </div>
           </div>
       </div>
         </section>

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

试试这个

<section id="slide" class="text-center">
       <div class="container">
           <div id="mycarousel" class="carousel slide" data-ride="carousel">
               <ol class="carousel-indicators">
                   <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
                   <li data-target="#mycarousel" data-slide-to="1"></li>
                   <li data-target="#mycarousel" data-slide-to="2"></li>
               </ol>
               <div class="carousel-inner">
                   <div class="item active">
                       <h1>Head Line</h1>
                       <p>Paragraph</p>
                       <button type="button" class="btn btn-success" data-target="#mycarousel" data-slide-to="1"> button </button>
                   </div>
                   <div class="item">
                       <h1>Head Line 2</h1>
                       <p>Paragraph 2</p>
                       <button type="button" class="btn btn-success" data-target="#mycarousel" data-slide-to="2">button2</button>
                   </div>
                   <div class="item">
                       <h1>Head Line 3</h1>
                       <p>Paragraph 3</p>
                       <button type="button" class="btn btn-success" data-target="#mycarousel" data-slide-to="0">button3</button>
                   </div>
               </div>
           </div>
       </div>
         </section>

【讨论】：