Creating more than one call to action button in the header slider

Hello,

I have two images in the header slider, one to introduce my blog and another to initiate a contact; however, the call to action buttons both point to the same anchor. Is there a way of creating two call to action buttons that point to different URLs in exactly the same way that we can create up to 4 images with different text sliders?

Many thanks in advance

Hi,

You can’t via the options. But we have these two snippets:


The first one does exactly what you asked, the second can show two buttons at the same time.

Thanks Vlad. I’m a coding novice (I mean treat me like an utterly dim moron who’s never seen code before)

Do I copy that code into the Extra CSS part of the customise section or somewhere else? Also, can you please let me know if I need to delete anything from this or copy it verbatim and simply overwrite the button1 and href link text? My thoughts are that my final code should look like this:

jQuery(function($) {

var my text = ‘my text’; //Slide 1
var my text = ‘my text’; //Slide 2

$(’.slide-inner a’).hide();

$( ‘.slide-item:nth-of-type(1) .slide-inner’ ).append(my text); //Slide 1
$( ‘.slide-item:nth-of-type(2) .slide-inner’ ).append(my text); //Slide 2
});

Thank you.

Just replace the hrefs and where it says Your text (copy it from the forums, not from your email notice).


jQuery(function($) {
 
   var button1 = '<a href="http://example.org" class="roll-button button-slider">Your text</a>';
   var button2 = '<a href="http://example.org" class="roll-button button-slider">Your text</a>';

  //Nothing to change below this line.
  $('.slide-inner a').hide();
 
  $( '.slide-item:nth-of-type(1) .slide-inner' ).append(button1); //Slide 1
  $( '.slide-item:nth-of-type(2) .slide-inner' ).append(button2); //Slide 2
});

Scroll down on the snippet page and you’ll see an Info section where it says where you need to add it.

Thank you again. It works perfectly. Really appreciate it.