How do I add a custom onClick function to Unslider so I advance to the next slide?

Question

I'm attempting to create custom navigation with Unslider.

I want to advance to the next slide when I click on the slides.

I'm new to Javascript. My code as it stands is:

<script>
  jQuery(document).ready(function($) {
    $('.my-slider').unslider({
      arrows:false
    });
  .on('click', function(){
    .unslider('next');
    });
  });
</script>

HTML:

<div class="my-slider">
  <ul>
    <li><img class="img-pad" src="img/img-1.jpg" alt=""></li>
    <li><img class="img-pad" src="img/img-2.jpg" alt=""></li>
    <li><img class="img-pad" src="img/img-3.jpg" alt=""></li>
  </ul>
</div>

I know it's wrong, but not how wrong.

Answer 1

You are using the . before unslider incorrectly. Remember that the dot should always follow after an object. Using a dot by itself means nothing. So your onClick function currently does nothing because it is so:

function(){
          .unslider('next');
};

You are telling the code to call a function on a non-existing entity.

Try this instead:

function(){
     $('.my-slider').unslider('next');
};

Although that will not actually work (because unslider is an initialisation method). You need a reference to the unslider object. So this may work:

function(){
     this.('next');
};

Or you could read the documentation and use their example which does this instead:

<script>
    jQuery(document).ready(function($) {

        var slider = $('.my-slider').unslider(
        {
           arrows:false
        });

        slider.on('click', function(){
          slider.unslider('next');
        });
    });

</script>

Answer 2

According to the documentation, instead of using false to the value of your arrow, use the following code:

arrows: {
    //  Unslider default behaviour
    prev: '<a class="custom-control prev">Previous slide</a>',
    next: '<a class="custom-control next">Next slide</a>',

    //  Example: generate buttons to start/stop the slider autoplaying
    stop: '<a class="unslider-pause" />',
    start: '<a class="unslider-play">Play</a>'
}

PS: under tab methods & options