I'm using the excellent jQuery plugin, Flexslider, to create a carousel on a webpage. It all works perfectly except for one thing: I want the slider to stop automatically animating when the user clicks on a given link elsewhere on the page.

Is this even possible?

I'm using the excellent jQuery plugin, Flexslider, to create a carousel on a webpage. It all works perfectly except for one thing: I want the slider to stop automatically animating when the user clicks on a given link elsewhere on the page.

Is this even possible?

• javascript
• jquery
• html
• flexslider

3 Answers 3

You want the slider to stop when a particular link elsewhere on the page is clicked. Let's assume that link has a class of "some-link" and let's also assume your flexslider has a clas of "flexslider", in that case you can use the following JS snippet:

$('.some-link').click(function() { $('.flexslider').flexslider("pause"); });

You'll want to make sure that code is inside a $(document).ready(function() { ... }) or that the script is below the html on your page that has the link with class of "some-link". Otherwise, the selector to add that click event won't match anything (since it won't exist yet).

Btw, the solution from @Guern has the most important info on how to actually pause the flexslider, but your question was asking for one more step. Despite being 2 years old, I'm answering this now, since it came up in a google search.

Sure it is possible.
In this example it stops when you click on a slide, just bind the click event to the page link you prefer.

$('.flexslider .slides > li').click(function() {
    $('.flexslider').flexslider("pause");
});

In the list with functions for that jQuery plugin there is:

slider.pause()                //Function: Pause slider slideshow interval

Not sure, but i think you can use this function to stop the effect, like this:

$(#elm).flexslider().pause();

You can see the list with properties of flexslider plugin on their webpage, at Advanced tab.