jquery - Bootstrap 播放/暂停控件

Question

我的 bootstrap 轮播上的播放和暂停控件有问题。这不是开箱即用的功能吗？我需要在页面上添加 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');
    });
});