Hover starts a simple slideshow

Question

I'm looking for the best way to only play an image slideshow when a user hovers the mouse over the image (slideshow again stops when user moves the mouse outside the image).

The demo below does everything I need but the hover functionality.

Link to demo

Link to documentation

Here is the html

<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>

and jQuery

 $(function(){
 $('.fadein img:gt(0)').hide();
 setInterval(function(){
 $('.fadein :first-child').fadeOut()
 .next('img').fadeIn()
 .end().appendTo('.fadein');}, 
 3000);
 });

Also I'm looking for the best way to increase the slideshow speed, decreased 3000 to 1000,(pointed out by RUJordan)

Answer 1

This is might be what you're looking for: https://github.com/sladex/images-rotation

Answer 2

<script type="text/javascript" src="js/cycle.js"></script>  // Download cycle.js from here http://jquery.malsup.com/cycle/
<script type="text/javascript">
jQuery(function($){

    // Cycle plugin
    $('.slides').cycle({
        fx:     'none',
        speed:   1000,
        pager:  '#nav',
        timeout: 70
    }).cycle("pause");

    // Pause & play on hover
    $('.slideshow-block').hover(function(){
        $(this).find('.slides').addClass('active').cycle('resume');

    }, function(){
        $(this).find('.slides').removeClass('active').cycle('pause').cycle(0);
    });

});
</script>

<div class="product-img slideshow-block">
     <div class="slides">
        <img src="http://yoursite.com/slide1.jpg" />
        <img src="http://yoursite.com/slide2.jpg" />
        <img src="http://yoursite.com/slide3.jpg" />
     </div>
</div>

Taken code from this link http://chandreshrana.blogspot.in/2016/01/image-slide-start-on-mouse-hover-jquery.html

Answer 3

Here is a Working demo

All you have to do is, call the function on hover and clearInterval on mouseOut.

Jquery

$('.fadein img:gt(0)').hide();
$(".fadein").hover(function(){
timer = setInterval(function(){   $('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},             
1000);
}, function() {
clearInterval(timer);
});

Answer 4

I'm looking for the best way to only play an image slideshow when a user hovers the mouse over the image (slideshow again stops when user moves the mouse outside the image).

You mean "mouseenter"

Check this example:

http://jsfiddle.net/F4peh/1/

$(document).ready(function(){

    $('.fadein img:gt(0)').hide();

    $(".fadein").mouseenter(function(){
           $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
    });

});