缩略图中的 Bootstrap3 轮播标题答案

【问题标题】：Bootstrap3 Carousel Caption from thumbnail缩略图中的 Bootstrap3 轮播标题
【发布时间】：2014-01-06 13:06:17
【问题描述】：

当鼠标光标位于轮播下方的缩略图上时，我想做带有图像更改的 Bootstrap 3 轮播。现在我有这样的东西，我有轮播和缩略图，在引导程序中通常图像会随时间变化，如果可以随时间变化并且当你将鼠标指向轮播图像下的缩略图时，我想要这个图像会改变还。

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

和引导： http://bootply.com/104037

感谢您的帮助，最好的问候。

【问题讨论】：

标签： javascript css twitter-bootstrap

【解决方案1】：

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

.carousel(数字)

将轮播循环到特定帧（基于 0，类似于数组）。

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

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

See Demo

【讨论】：