CODEWITHSUNDEEP
javascriptjqueryflexslider
Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

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

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?

Upvotes: 11

Views: 22490

Answers (4)

Joey Joe Joe Junior Shabadoo
Joey Joe Joe Junior Shabadoo

Reputation: 25

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

Upvotes: 0

meck373
meck373

Reputation: 1124

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

Upvotes: 1

Sambhav
Sambhav

Reputation: 11

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

Upvotes: -1

Sergey
Sergey

Reputation: 682

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

Upvotes: 42

Related Questions