All geek questions in one place

Twitter bootstrap carousel - mouse-over slide images

I use twitter bootstrap carousel to show images sliding on my page. It works great.

Instead of moving the images with a click of the mouse, I wanted the images to slide when I hover over the arrows. I made changes and it works (as shown below).

boostrap-carousel.js, line 193 $ (document) .on ('mouseover.carousel.data-api', '[data-slide], [data-slide-to]', function (e)

But the problem is that I want the images to slide until the mouse is above the arrow, and stop sliding when I hold the mouse.

Can you help me?

+4
source share
1 answer

Instead of modifying bootstrap-carousel.js you can use Javascript / jQuery to control the carousel. A delay / timer can be used to repeat the function of the mouse, which runs the normal functions of the left / right carousel controls.

 $('#myCarousel').carousel({interval:false}); /* init the carousel but don't start it */ var myInterval=false; $('.carousel-control').mouseover(function() { var ctrl = $(this); var interval=300; myInterval = setInterval(function(){ ctrl.trigger("click"); },interval); }); $('.carousel-control').mouseout(function(){ clearInterval(myInterval); myInterval = false; });

Working demo on Bootply: http://bootply.com/Gyfhc2kCwd

+5
source

Source: https://habr.com/ru/post/1491280/

More articles:


All Articles