简体   繁体   中英

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

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 .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM