Search code examples
jqueryflexslider

Adding a "next" button to FlexSlider2

I'm looking to make a "next"-button for my Flexslider.

I was browsing through their git at https://github.com/woothemes/FlexSlider and stumbled upon that they added a function in their recent update:

$('#slider').flexslider("next") //Go to next slide

I added this to my in my site, and changed the id that triggers the event, yet nothing happens. Any ideas? My script in the head looks like this:

<script type="text/javascript">
    $('#flexnext a').flexslider("next") //Go to next slide
</script>

And later in the code:

<div id="flexnext><a href="#" style="position: absolute; z-index: 9001; right: 300px; bottom: 8px; cursor: pointer; display: block; text-align: center; color: #fff; text-decoration: none;"><img src="<?php echo get_template_directory_uri(); ?>/_assets/img/forwardbutton.png" alt="Gå frem" /><br />Læs videre her</a></div>

Any ideas what I could be doing wrong?

Solution

  • You need to call .flexslider() on the slider, not an anchor tag.

    $('#flexnext a').on("click, function(){
  $('#flexnext').flexslider("next")
});

    Or something similar should work.

    If you can't make it work, it would be handy to see a fiddle.