Bootstrap3 Carousel Caption from thumbnail

Question

I want to do Bootstrap 3 carousel with image change when mouse cursor will be on thumbnail under carousel. Now I've got something like this, I've got carousel and thumbnails under it, in bootstrap normally image changes with time , I want this if it's possible to change with time and when you point your mouse to thumbnail under carousel image will change also.

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

and bootply: http://bootply.com/104037

Thanks for your help , best regards.

Answer 1

There is this option called number which you can use to slide to a specific image. See link

.carousel(number)

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

All you need to get index value of the hovered thumb and pass that as the option to carousel.

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

See Demo