CODEWITHSUNDEEP
jquerycssslideshow
Anh Tuấn
Anh Tuấn

Reputation: 5

how to autoplay with this slideshow

I have this slideshow. You can see demo: http://jsfiddle.net/handoi912/Yh6Lp/

Now, I want slideshow autoplay, i can't. Please help me! Thanks!

    <script type="text/javascript">
    $(function() {
        $('#cn-slideshow').slideshow();
    });
</script>

Upvotes: 0

Views: 559

Answers (1)

burnsjeremy
burnsjeremy

Reputation: 211

How about using trigger, to trigger the click event of the next button. You can keep the original slideshow intact that way.

You would run this on document ready:

setInterval(function(){
  $('.cn-nav-next').trigger('click');}, 
3000);

You can see it in action here: http://jsfiddle.net/burnsjeremy/SrkzD/

Edit: My first answer was bothering me a little so I updated it to separate out some code. I also added a mouseover to stop the auto-play feature until mouseout. You can see that in action here: http://jsfiddle.net/burnsjeremy/pHrvJ/

Code from edit that will make the slideshow stop so users can flip through slideshow like normal.

var intervalStart = setInterval(function () {
    $('.cn-nav-next').trigger('click');
},
3000);
// Stop slideshow on mouseover, and mouseout start back
$('#cn-slideshow').mouseover(function(){
    clearInterval(intervalStart);
}).mouseout(function(){
    intervalStart = setInterval(function(){
        $('.cn-nav-next').trigger('click');
    }, 3000) ;
})

This should be plenty to get you started on solving this problem with ease. Thanks!

Upvotes: 4

Related Questions