javascript - 来自缩略图的 Bootstrap3 Carousel 标题

Question

当鼠标光标位于轮播下的缩略图上时，我想使用图像更改来执行 Bootstrap 3 轮播。 现在我有这样的东西，我有旋转木马和它下面的缩略图，在 Bootstrap 中通常图像随时间变化，我想要这个如果它可以随时间改变并且当你将鼠标指向旋转木马图像下的缩略图时会改变还。

    <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-captions" data-slide-to="1"></li>
          <li data-target="#carousel-example-captions" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="item active">
            <img data-src="holder.js/900x500/auto/#777:#777" alt="900x500" >
              <h3>First slide label</h3>
              <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
          </div>
          <div class="item">
            <img data-src="holder.js/900x500/auto/#666:#666" alt="900x500" >
            <div class="carousel-caption">
              <h3>Second slide label</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="item">
            <img data-src="holder.js/900x500/auto/#555:#5555" alt="900x500" 
            <div class="carousel-caption">
              <h3>Third slide label</h3>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>
  <div class="container thumbs">
            <div class="row">
                <div class="col-xs-6 col-md-3">
                    <a href="#" class="thumbnail"> 
                        <img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="display: inline;" alt=""> </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="http://www.vpwallpapers.com/wp-content/uploads/2013/11/Cat-Wallpaper-10.png" style="display: inline;" alt="">
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="http://www.vpwallpapers.com/wp-content/uploads/2013/11/Cat-Wallpaper-10.png" style="display: inline;" alt="">
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="http://www.vpwallpapers.com/wp-content/uploads/2013/11/Cat-Wallpaper-10.png" style=" display: inline;" alt="">
                    </a>
                </div>
            </div>
        </div>

和bootply: http://bootply.com/104037

感谢您的帮助，致以最诚挚的问候。

Answer 1

有一个名为 number 的选项，您可以使用它滑动到特定图像。 See link

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

您只需要获取悬停拇指的索引值并将其作为选项传递给轮播。

$('.thumbnail').on('mouseover',function(){
  var slide_to = $('.thumbnail').index($(this));
  $('.carousel').carousel(slide_to);
});

See Demo