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?

Vinson

There are so many plug-ins out there that you're unlikely to find someone to answer this. – Fibroin

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. – Maggot

@Maggot there is a support forum, i asked there too, i will end-up modifying the core – Vinson

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..?). – Maggot

Answer 1

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"));
    });
}
});

Tippets

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? – Twostep

Like @Twostep 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? – Niklaus

@Niklaus I eventually managed to get it to work with this gist which works by finding the next control and triggering a click on it for only the right slider – Twostep

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') – Hanna

Answer 2

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"    
    });
});

Bujumbura

Answer 3

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"));
        });
    }
});

Riflery

Answer 4

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");
   });
});

Banta

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... – Hanna