引導程序播放/暫停控制

Question

遇到引導程序傳送帶上的播放和暫停控制問題。這不是開箱即用的功能嗎？我需要在頁面上添加jQuery某人嗎？如果是這樣，

HTML

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

       <li data-slide-to="3" data-target="#carousel-679987"> 
       </li> 

       <li data-slide-to="4" data-target="#carousel-679987"> 
       </li> 

      </ol> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <img alt="Find A Quit Method that Works for You" src="/<?php echo path_to_theme(); ?>/images/SFG-Carousel-1.jpg"> 
        <div class="carousel-caption"> 
         <h4> 
          First Thumbnail label 
         </h4> 
         <p> 
          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. 
         </p> 
        </div> 
       </div> 
       <div class="item"> 
        <img alt="Goal Setting Eating, Physical Activity and Weight Loss" src="/<?php echo path_to_theme(); ?>/images/SFG-Carousel-2.jpg"> 
        <div class="carousel-caption"> 
         <h4> 
          Second Thumbnail label 
         </h4> 
         <p> 
          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. 
         </p> 
        </div> 
       </div> 
       <div class="item"> 
        <img alt="How To Manage Your Cravings" src="/<?php echo path_to_theme(); ?>/images/SFG-Carousel-3.jpg"> 
        <div class="carousel-caption"> 
         <h4> 
          Third Thumbnail label 
         </h4> 
         <p> 
          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. 
         </p> 
        </div> 
       </div> 


        <div class="item"> 
        <img alt="Quitting 6 Ways TO Boost Your Mood" src="/<?php echo path_to_theme(); ?>/images/SFG-Carousel-4.jpg"> 
        <div class="carousel-caption"> 
         <h4> 
          Second Thumbnail label 
         </h4> 
         <p> 
          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. 
         </p> 
        </div> 
       </div> 
       <div class="item"> 
        <img alt="6 Tips for Managing Portion Size" src="/<?php echo path_to_theme(); ?>/images/SFG-Carousel-5.jpg"> 
        <div class="carousel-caption"> 
         <h4> 
          Third Thumbnail label 
         </h4> 
         <p> 
          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. 
         </p> 
        </div> 
       </div> 



      </div> 

      <div class="carousel-controller"> 

      <div class="prev_slides"> 
      <a class="left carousel-control" href="#carousel-679987" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span></a> 
      </div> 

      <div class="play_slides"> 

       <a class="play carousel-control" href="#carousel-679987" data-slide="play"> 
      <span class="glyphicon glyphicon-play"></span></a> 
      </div> 

      <div class="pause_slides"> 


      <a class="pause carousel-control" href="#carousel-679987" data-slide="pause"> 
      <span class="glyphicon glyphicon-pause" ></span></a> 

      </div></div> 

Answer 1

這已被他人之前解決：

http://jsfiddle.net/XFcSv/27/

<!-- Carousel --> 
<div id="homeCarousel" class="carousel slide"> 
    <!-- Menu --> 
    <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> 

    <!-- Items --> 
    <div class="carousel-inner"> 

     <!-- Item 1 --> 
    <div class="item active"> 
     <img src="http://lorempixel.com/1500/600/abstract/1"/> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Bootstrap 3 Carousel Layout</h1> 
      <p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p> 
      <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a> 
     </p></div> 
     </div> 
    </div> 

     <!-- Item 2 --> 
    <div class="item"> 
     <img src="http://lorempixel.com/1500/600/abstract/2"/> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Changes to the Grid</h1> 
      <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> 
      <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> 
     </div> 
     </div> 
    </div> 

     <!-- Item 3 --> 
    <div class="item"> 
     <img src="http://lorempixel.com/1500/600/abstract/3" /> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Percentage-based sizing</h1> 
      <p>With "mobile-first" there is now only one percentage-based grid.</p> 
      <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
    <span class="icon-prev"></span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <span class="icon-next"></span> 
    </a> 
    <div id="carouselButtons"> 
     <button id="playButton" type="button" class="btn btn-default btn-xs"> 
      <span class="glyphicon glyphicon-play"></span> 
     </button> 
     <button id="pauseButton" type="button" class="btn btn-default btn-xs"> 
      <span class="glyphicon glyphicon-pause"></span> 
     </button> 
    </div> 
</div> 

JQuery的：

$(function() { 
    $('#homeCarousel').carousel({ 
     interval:2000, 
     pause: "false" 
    }); 
    $('#playButton').click(function() { 
     $('#homeCarousel').carousel('cycle'); 
    }); 
    $('#pauseButton').click(function() { 
     $('#homeCarousel').carousel('pause'); 
    }); 
});