CODEWITHSUNDEEP
javascriptjqueryflexslider
Dario Lanfranconi
Dario Lanfranconi

Reputation: 3

Flexslider - click image to advance to next slide

I am using the current (mid-2017) version of Flexslider and am trying to alter the code so that a click on an image advances the slider to the next slide.
I am aware that this question has been answered for previous versions but do not know how to alter/insert the code for the jquery.flexslider-min.js of the new Flexslider plugin. Any help is much appreciated.

$('.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: 0

Views: 1350

Answers (1)

icicleking
icicleking

Reputation: 1077

I don't know how you're loading things onto your page, but if you put the following on the page(in script tags), the slider should go to the next slide on img click.

<script>
$('.slides li img').click(function(event){
  event.preventDefault();
  $('#slider').flexslider("next") //Go to next slide
});
</script>

If you are loading this jQuery in an external file, exclude the script tags. Make sure it comes after the flexslider code. Also, you may have to replace $ with jQuery. And, you need to have the class slides on the slide container.

That's right from the repo docs.

Upvotes: 1

Related Questions