Header slider, change the action button for one of the five slides

In the code snippet section, it describes the code to use but it doesn’t specify the file where you should add the code.

Hello there,

Which code snippet are referring to? It will be helpful if yo can share a link here and I am happy to help out.

Regards,
Kharis
aThemes Support

[https://docs.athemes.com/article/57-different-buttons-for-each-slide]

Thank you for sharing the link.

Try these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    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
    });
  1. Update

I hop that helps. Let me know if you have anything else I can help with.

Regards,
Kharis
aThemes Support

Kharis,

Thank you. I followed your instructions and it worked. I was able to customize the button for each slide in the header.

Best,

Claire

1 Like

You’re welcome Claire!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support