How to show the next slide when you click on the image in flexslider

Question

I'm using the flexslider plugin and i wanted to know if there is an easy way (apart from changing the core of the plugin which is what i am going to do if i don't find an easy answer) to show the next slide when you click on the current slide. I set up the flexslider like this

$('.flexslider').flexslider({
    directionNav : false,
    slideshow: false,
        animation: "slide",
        controlsContainer: ".flex-container"
    });

I disabled the Prev/Next command because i didn't like them. What should i do?

There are so many plug-ins out there that you're unlikely to find someone to answer this. — Diodeus - James MacFarlane, Mar 05 '12 at 16:57
This is very specific. Any half decent plugin would have it's own support forum - have you tried their site to see if they have a support forum? If they do, chances are this has been asked there. — ClarkeyBoy, Mar 05 '12 at 17:01
@ClarkeyBoy there is a support forum, i asked there too, i will end-up modifying the core — Nicola Peluchetti, Mar 05 '12 at 17:07
That's probably your best bet.. I'm guessing controlsContainer contains next / previous buttons - given this, you should probably just need to search for this, find the place where it binds click events to the buttons, remove the previous button and change the selector for the next button to a class which is common to all slides. That's about as much as I can help without actually using the plugin myself (or if you can set up a JSFiddle then I may be able to help..?). — ClarkeyBoy, Mar 05 '12 at 18:10

score 42 · Accepted Answer · answered Jul 04 '12 at 16:10

42

Maybe a little bit too late, but here's the solution for Flexslider 2:

$('.flexslider').flexslider({
    directionNav : false,
    slideshow: false,
    animation: "slide",
    controlsContainer: ".flex-container",
    start: function(slider) {
    $('.slides li img').click(function(event){
        event.preventDefault();
        slider.flexAnimate(slider.getTarget("next"));
    });
}
});

answered Jul 04 '12 at 16:10

Sergey

682
9
14

1

This works, but makes all instances of Flexslider on the page advance to the next slide. Do you know how to make it only the one that is clicked that advances? – Simon27 May 03 '13 at 11:25
Like @Simon27 I'd like to target the specific clicked slider, not all on the page. How would I do this? Can you access the slider from the event? – Daniel Sep 20 '13 at 13:04
3

@Daniel I eventually managed to get it to work with [this gist](https://gist.github.com/simonboak/6702183) which works by finding the next control and triggering a click on it for only the right slider – Simon27 Sep 25 '13 at 16:23
Change `$('.slides li img')` to be more specific to the slider you want to have an effect on in order to target a specific slideshow. eg: `$('#flexslider1 .slides li img')` – Jake Jun 30 '14 at 05:14

score 1 · Answer 2 · answered Jan 24 '15 at 14:48

I had a Safari problem with the code above. This is my easy solution.

jQuery( document ).ready( function( $ ) {
    $('.flexslider').on('click', function(){
        $(this).find('.flex-next').click();
    });  
}


$(window).load(function() { 
    // Slider
    $('.flexslider').flexslider({
    directionNav : false,
    slideshow: false,
    animation: "slide",
    controlsContainer: ".flex-container"    
    });
});

score 0 · Answer 3 · answered Jul 07 '16 at 17:12

Here's a small update to the accepted answer above that targets the specific slider clicked, rather than all the sliders on the page:

$('.flexslider').flexslider({ 
    start: function(slider) {
        $('.slides li img', slider).click(function(event){
            event.preventDefault();
            slider.flexAnimate(slider.getTarget("next"));
        });
    }
});

score -1 · Answer 4 · answered Jul 26 '13 at 09:48

-1

After each slider animation completes, find the active slide and change the image src

$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    slideshow: false,
    touch: true,
    itemWidth: 235,
    itemMargin: 10,
    after: function (slider) {
      $(slider).find('.flex-active-slide').find("img").each(function () {
      var src = $(this).attr("data-src");
      $(this).attr("src", src).removeAttr("data-src");
   });
});

answered Jul 26 '13 at 09:48

Sambhav

11
2

1

Maybe I am missing something, but this will completely destroy the actual slider. I would just want to to the next slide, but this playing rubics cube with the images within those slides. More importantly slides are often more than just an image... This is by far the worst idea. Even if you wanted to rubics cube your slideshow, you could do it with the contents of the slide and not randomly grab image sources... – Jake Jun 30 '14 at 04:42

How to show the next slide when you click on the image in flexslider

4 Answers4