Maciej Rumianowski's Weblog 

jQuery ulslide plugin - Stop autoslide on mouseover

by Maciej Rumianowski


Posted on Saturday Jan 11, 2014 at 05:57PM in General


Ulslide is a nice simple jquery plugin for slides. Some time ago I used it on one of my sites with a small tweak. I wanted to stop autoslide on Mouse Over Event and start on Mouse Out Event. It looks like others find it also useful, because I've got an email yesterday asking me how I did it ;) So here it is:

<ul id="slide1">
<li> <img src="//rumianom.pl/rumianom/mediaresource/50165c31-a27a-491d-bedc-c6b4225c656a" alt="" /></li>
<li> <img src="//rumianom.pl/rumianom/mediaresource/1f35cfc4-1bd0-48fd-a325-1c358030102b" alt="" /></li>
<li> <img src="//rumianom.pl/rumianom/mediaresource/9b853f9a-2a97-4576-abfc-c4a26ac3a75c" alt="" /></li>
</ul>
<a href="#" id="e1_next"> Next |</a>
<a href="#" id="e1_prev"> Previous |</a>
<a href="#" id="e1_stop"> Stop |</a>
<a href="#" id="e1_start"> Start </a>


$(function() {
    $('#slide1').ulslide({
        effect: {
            type: 'slide', // slide or fade
            axis: 'y',     // x, y
            distance: 40   // Distance between frames
        },
        duration: 500,
        autoslide: 3000,
        width: 443,
        height: 300,
        mousewheel: true,
        nextButton: '#e1_next',
        prevButton: '#e1_prev'
    });
    $('#slide1').mouseover(function(){
    var slider = $('#slide1')[0];
        slider.clearAutoslide();
    });
    $('#e1_stop').click(function(){
    var slider = $('#slide1')[0];
        slider.clearAutoslide();
    });

    $('#slide1').mouseout(function(){
    var slider = $('#slide1')[0];
        slider.initAutoslide(3000);
    });
    $('#e1_start').click(function(){
    var slider = $('#slide1')[0];
        slider.initAutoslide(3000);
    });
});


Next | Previous | Stop | Start



Comments:

Thank you so much for this!!! I was trying to figure this out today but couldn't find a solution!

Posted by pxpl on June 18, 2014 at 06:12 PM GMT #


your ul slider not working :P

Posted by asad on October 22, 2014 at 12:13 PM GMT #


Thanks for info, now it's fixed ;)

Posted by Maciej Rumianowski on December 31, 2014 at 07:01 PM GMT #


Leave a Comment

HTML Syntax: NOT allowed