Blog for web designers

bootstrap slider sliding images on mouseover

Bootstrap slider sliding images on mouseover

Twitter bootstrap is a great resources for a front end developers. It includes all most necessary plugins to make an website interactive. At the same time if we talk about the bootstrap carousel, its one of the finest plugin to create a slider either for a content sliding or images sliding. The function for carousel work on click, so what if we want to make it work on mouseover. In this post I will show you how the bootstrap slider sliding images on mouseover.


$('#myCarousel').carousel({interval:false}); /*  initialized the carousel but don't start it  */
var myInterval=false;
$('.carousel-control').mouseover(function() {
    var ctrl = $(this);
    var interval=10;

    myInterval = setInterval(function(){
         ctrl.trigger("click");
    },interval);
});

$('.carousel-control').mouseout(function(){
    clearInterval(myInterval);
    myInterval = false;
});

Santosh Shah

My name is Santosh Shah and blogs at santosh-shah.com


Reader Comments

  1. Thanks! Excellent working!
    I’ve tested in Typo3 7.6.10 with Bootstrap files included.
    You have to add this code not in the bootstrap.js but in some other different .js file (custom made by you). Otherwise the code won’t work.
    But in the different file – work correctly.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.