Different buttons for each slide

Use this code to disable the default slider button and instead create one button for each slides.

jQuery(function($) {
 
   //Define the new buttons. Delete the lines you don't need
   var button1 = '<a href="http://example.org" class="roll-button button-slider">Button 1</a>'; //Slide 1
   var button2 = '<a href="http://example.org" class="roll-button button-slider">Button 2</a>'; //Slide 2
   var button3 = '<a href="http://example.org" class="roll-button button-slider">Button 3</a>'; //Slide 3
   var button4 = '<a href="http://example.org" class="roll-button button-slider">Button 4</a>'; //Slide 4
   var button5 = '<a href="http://example.org" class="roll-button button-slider">Button 5</a>'; //Slide 5

  //Hide the default button
  $('.slide-inner a').hide();
 
  //Add the new buttons. Delete the lines you don't need
  $( '.slide-item:nth-of-type(1) .slide-inner' ).append(button1); //Slide 1
  $( '.slide-item:nth-of-type(2) .slide-inner' ).append(button2); //Slide 2
  $( '.slide-item:nth-of-type(3) .slide-inner' ).append(button3); //Slide 3
  $( '.slide-item:nth-of-type(4) .slide-inner' ).append(button4); //Slide 4
  $( '.slide-item:nth-of-type(5) .slide-inner' ).append(button5); //Slide 5
});

Tips:

  1. replace http://example.org with the links you want;
  2. replace Button 1 (2,3,4,5) with the text you want for your buttons;
  3. delete the lines of code you don't need.
INFO: This is a JS snippet. If you don't have a child theme or don't know how to use one, we recommend that you use this plugin.

Still need help? Please use this form only for feedback or suggestions regarding our documentation! Please use this form only for feedback or suggestions regarding our documentation!