CODEWITHSUNDEEP
javascriptjqueryjcarousellite
MFN
MFN

Reputation: 45

jcarousellite stop on click

hi i have a page with jcarousellite showing some images and scrolling auto after every 5 seconds i want to stop the scroll when i click on any image in carousel

here is what i am trying to do 

$(document).ready(function() {
    $('.slider_images').jCarouselLite({
        btnNext: "#next",
        btnPrev: "#prev",
        auto:  3000         
    }); 

    $(".slider_images img").click(function(){


        $('.slider_images').jCarouselLite({
            btnNext: "#next",
            btnPrev: "#prev",
            scroll: false       
        }); 


    });
});

Upvotes: 1

Views: 3368

Answers (6)

user3063448
user3063448

Reputation: 31

$(".mycarousel").trigger('stopCarousel');

If you're using the newest jcarousel https://github.com/kswedberg/jquery-carousel-lite/

This event isn't in their documentation for some reason although pauseCarousel is.

Upvotes: 0

MFN
MFN

Reputation: 45

I am so sorry for very late response. My problem was solved. We can achieve stop on click property very easily by changing pauseOnHover option of jcarousellite. If you see the implementation of pauseOnHover, its something like this:

o.pauseOnHover ? ul.hover(function (){ paused == 1 }, function (){paused=0}) : "";

we can achieve stop on click by changing ul.hover to ul.click

o.pauseOnHover ? ul.click(function (){ paused == 1 }, function (){paused=0}) : "";

Have a Nice Day.

Upvotes: 1

Jacob Weigand
Jacob Weigand

Reputation: 21

This will stop all carousels auto progression on the page. I am killing everything that is using a timeout here. This worked for me:

$(".slider_images img").click(function(){
    var x = setTimeout("");
    for (var i = 0 ; i < x ; i++)
    clearTimeout(i);
}

Upvotes: 0

Gary
Gary

Reputation: 1

Add this to the top of the file 

var timers = new Array();

change

setInterval(function(){go(curr+o.scroll)},o.auto+o.speed)

to 

timers.push(new Array( this.className, setInterval(function(){go(curr+o.scroll)},o.auto+o.speed)));

to stop a scroll

var classToStop = ".TestClass"; 

for(var i=0; i < timers.length; i++)
{
    if("."+timers[i][0] == uploadifyClass)
    window.clearInterval(timers[i][1])
}

Upvotes: 0

jimyshock
jimyshock

Reputation: 115

I wanted to disagree with scheffield and/or find a work around using this plug-in, but I have to agree with him - it would take a rewriting of the source to do what you wanted. Alternatively, you may want to consider jquery cycle. It has 'pause' and 'stop' methods already there.

Upvotes: 0

scheffield
scheffield

Reputation: 6787

i read the code for a while and found out that the auto scrolling is implemented by using a setTimeout:

if(o.auto)
    setInterval(function() {
        go(curr+o.scroll);
    }, o.auto+o.speed);

If you use jCarouselLite a second time it won't stop the setTimeout. To stop a setTimout you have to invoke window.clearTimeout:

var timeoutId = window.setTimeout(function(){...}, 100);

window.clearTimeout(timeoutId);

This is impossible since the code of jcarousel didn't provide you with these timeoutId. You can talk to the developer or modify the code on your own.

Upvotes: 0

Related Questions