Home Page Slider - URL for Call to Action Button

Hello,

I currently have 3 different images with accompanying text in use on the Home Page slider. I also have the default Call to Action button in use which reads ‘‘Learn More’’. However, I would like the URL on the button to change depending on which image in the slider is currently shown. I.e. can I have the button link to a specific page when image 1 is shown, link to a different specific page when image 2 is shown and link to a 3rd different page when image 3 is shown?

In the customise settings there is only the option to apply one URL for the entire slider, as far as I can see.

Many thanks,
Lawrie

Hello Lawrie,

Follow this documentation to insert buttons on each slides.

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

Regards,
Kharis

Hi Kharis,

Thanks for this. Can I just confirm, where do I add this? Do I add it to an existing script or do I need to use a custom javascript plugin?

Kind regards,
Lawrie

Hello Lawrie,

Try doing the below 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

Regards,
Kharis

Thanks Kharis, that worked!