Thumbnail Carousel Caption in Bootstrap 3

Is it possible to create a Bootstrap 3 carousel where the image changes when the mouse cursor hovers over the thumbnail under the carousel? Currently, I have a setup with the carousel and thumbnails below it. Typically in Bootstrap, the image changes automatically with time, but I want to implement a feature where pointing your mouse at a thumbnail triggers the image change as well.


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

Check out the bootply for reference:

Thank you for your assistance, best regards.

javascriptcsstwitter-bootstrap

Answer №1

If you want to move to a specific image in a carousel, you can utilize the number option. Check out this link for more information.

.carousel(number)

This function allows you to switch the carousel to a particular frame, specified in a zero-based index like an array.

To achieve this, simply obtain the index value of the thumb that is being hovered over and set it as the parameter for the carousel's option.

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

For a visual demonstration, visit this Demo.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps should I take to design and implement this basic search form?

Essentially, I have a three-page setup: - One page containing all possible search results such as: 'search result 1' 'search result 2' 'search result 3' - Another page with a search form and enter button. - And finally, a res ...

phpjavascriptjqueryhtml

Different ways to modify the style of a MenuItem component in PrimeNG

Seeking advice on customizing the look of a MenuItem in PrimeNG. Here's what I have attempted so far: <p-menu [style]="{'width': '400px'}" #menuOpcoesLista popup="popup" [model]="opcoesListaCS" appendTo="body"></p-menu> ...

cssangularprimeng

Combining TypeScript and JavaScript for efficient mixins

I came across an article on MDN discussing the usage and creation of mix-ins (link). Intrigued, I decided to try implementing it in TypeScript: type Constructor = new (...args: any) => any; function nameMixin(Base: Constructor) { return class extends ...

javascripttypescriptdynamicsubclassmixins

The save feature becomes dysfunctional after switching to the Material-UI dependency in a React project

After integrating the Material-UI dependency into my ReactJS code, I encountered an issue where the "save" functionality no longer works properly. Previously, when editing a task in my simple Todo list app, the new name would be saved successfully. However ...

javascripthtmlreactjsmaterial-ui

Avoiding conflicts: Using Tabs with Revolution Slider without jQuery interference

I'm running into an issue with the tabs on my website. The revolution slider is working perfectly, but the tab widget seems to be displaying all the tab contents at once instead of each one separately. You can see the problem here: at the bottom of t ...

javascriptjqueryhtmltabsjquery-ui-slider

Sending SQL queries with multiple selections, each containing three values for every option

I am faced with a challenging question that will require me to dedicate long hours towards solving it and finding a solution. Imagine I have a multiple select element with various options, each consisting of 3 values: One value for the language name One ...

javascriptphpsqlvue.js

You cannot use voice_channel.join() to create a music bot in discord.js v13

As I was working on a new music command feature for my Discord bot, I encountered an issue. Whenever I try to use the command -play {url}, I keep getting an error message that says: voice_channel.join is not a function. I searched through various resource ...

javascriptnode.jsdiscorddiscord.js

Finding a specific cell in a Django HTML table: tips and tricks

Recently delving into django and its intricacies. Struggling to grasp the concept of accurately pinpointing a specific cell within an html table. Yearning to modify the background color of select cells based on certain conditions derived from the generate ...

pythonhtmlcssdjango

The height of each Bootstrap column is equal to the height of its corresponding

I am trying to prevent the column height from being equal to the row height in Bootstrap. Here is my code snippet: <div class="row justify-content-center text-center"> <div class="col-sm-3"></div> <div class="col-sm-9"></d ...

htmlcsstwitter-bootstrap

Tips for extracting information from an HTML table into a function using Google Apps Script

I am experiencing difficulties in coding this. I have attempted to use google.script.run but it's not working as expected. When I click the button "Approved," the data should be sent to a function, but I'm unsure of what steps to take next. I fee ...

javascriptgoogle-apps-scriptgoogle-sheets

Utilizing dotenv: Incorporating the value of one environment variable into the name and value of another environment variable

When it comes to my testing framework, I rely on dotenv for handling environment variables across different test environments. Currenty, I'm looking for a way to incorporate the value of a specific environment variable into both the value and name of ...

javascriptenvironment-variablesdotenv

Clicking on a card will cause it to expand

Exploring Material-UI-React for the first time to create expanding cards, I've encountered an issue where all cards expand when one is clicked. How can I modify my code so that only the clicked card expands without affecting the others? const useSt ...

javascriptreactjscomponentsmaterial-ui

After examining the width properties in the CSS code, it was discovered that one particular icon is larger in

Is there a way to adjust the width of the first icon in my container using CSS? The first icon appears larger than the others, and I'm having trouble making it the right size. #features { margin-top: 35px; } .grid { display: flex; } #feat ...

htmlcssfont-awesome

Does the Android 4.3 Internet browser not support @font-face declarations?

After my Samsung Galaxy S3 phone recently updated from Android 4.1.3 to Android 4.3, I noticed that some of the websites I designed are not displaying the fonts correctly. These sites were tested on the Android internet browser and use @font-face. How can ...

csscross-browserfont-faceandroid-4.3-jelly-beanandroid-internet

Liquid backdrop centered immobile elements

I'm facing some challenges trying to figure out the most efficient and correct way to achieve this layout, similar to Stack Overflow's design. I want a header with a background color that spans the entire width of the page, while keeping the cont ...

htmlcss

How can you verify the correctness of imports in Typescript?

Is there a way to ensure the validity and usage of all imports during the build or linting phase in a Typescript based project? validity (checking for paths that lead to non-existent files) usage (detecting any unused imports) We recently encountered an ...

javascripttypescripttslint

Sleek descending motion effect

I have created a simple function, but it is not animating smoothly and seems to lag... I am using it for a div sized at 1600x700 pixels on page load $(document).ready(function(){ $('#slider').slideDown(500); }); Is there any way to ensure s ...

javascriptjquery

Accessing the parent div in an Ajax success function

I am looking for a solution to hide a parent div when a link is clicked and an ajax call is successfully made. I have tried placing the hide() function within the success part of the ajax call, but it seems to not work: $('.mylink').click(functi ...

javascriptjqueryajaxjquery-animate

Having trouble passing arguments to button methods in jasmine when applying vue and moment libraries

I am working on unit testing a Vue app using `jasmine` and `karma`. Here is an example of the code inside one of my components: After fetching data from a database with `v-for=(data,index)`, I am displaying the `data.date` in the template: <p class=&qu ...

javascriptvue.jsvuejs2jasminekarma-jasmine

What is the purpose of using translateY(-50%) to vertically center an element that is positioned at top: 50%?

I've noticed that this code successfully aligns a div vertically within its parent element: .element { position: relative; top: 50%; transform: translateY(-50%); } My curiosity lies in the reasoning behind this. Initially, I thought that the p ...

htmlcss