How to add more than 5 clickable header slider image

Hello Support team,

Could you please, help adding 6th, 7th or more header slides that are clickable images, not using “call to action button”?

following this post Adding more slides to Frontpage Slider, was possible to add with clickable button.

Regards
Timba

Hi Timba,

Thank you for contacting us.

​Please accept my apologies for the delay in response. I really appreciate your patience.

Please confirm whether you are able to add extra slide images with the custom jQuery code solution as mentioned in that link. If so, please share your final code to pastebin.com and update me with its link. I will try to suggest some coding improvements to add buttons directly from your code.

Regards,
Kharis
aThemes Support

Hi Karis,

here is the link: https://pastebin.com/kuaZ5tJs

6th slide was added with button. my main concern which is not solved yet, is to add a clickable 6th slide without button.

Regards
Timba

Hi Timba,

Thank you for sharing the code.

Please try this one instead:

    (function($){

      $.fn.addHeaderSlider=function(i){var e=$.extend({imageUrl:"",mainTitle:"",subTitle:"",buttonURL:"",buttonText:""},i),t='<div class="slide-item" style="background-image:url(\''+e.imageUrl+"')\">";t+='<img class="mobile-slide preserve" src="'+e.imageUrl+'" />',t+='<div class="slide-inner custom-slide-inner"><div class="contain animated fadeInRightBig text-slider">',t+='<h2 class="maintitle">'+e.mainTitle+"</h2>",t+='<p class="subtitle">'+e.subTitle+"</p>",t+='</div><a href="'+e.buttonURL+'" class="roll-button button-slider">'+e.buttonText+"</a></div>",t+="</div>",""!=e.imageUrl&&this.find(".slides-container").prepend(t)};

      /* New slide definition */

      /* Slide 1 */
      $('.header-slider').addHeaderSlider({
        imageUrl: 'http://yoursite.com/wp-content/uploads/path/to/slide-image-6.jpg',
        mainTitle: 'Main title of slide',
        subTitle: 'Subtitle of slide',
        buttonURL: 'My Button for new slide',
        buttonText: '#button',
      });

      /* Slide 2 */
      $('.header-slider').addHeaderSlider({
        imageUrl: 'http://yoursite.com/wp-content/uploads/path/to/slide-image-7.jpg',
        mainTitle: 'Main title of slide',
        subTitle: 'Subtitle of slide',
        buttonURL: 'My Button for new slide 2',
        buttonText: '#button2',
      });

    })(jQuery);

I hope that helps.

Regards,
Kharis
aThemes Support

Hi Kharis,

The code you shared is adding buttons on all slides. here https://pastebin.com/pXgViYQd is the code used for the 5 clickable slides, the request is to add more clickable slides without adding action buttons.

Regards
Timba

Hi Timba,

After rechecking your code, I noticed you were sharing partial code.

Try this code instead.

Let me know how it goes.

Regards,
Kharis
aThemes Support

Hi Kharis,

The last code you shared is also using call to action buttons. I am looking for a solution without buttons, were the whole slide image is clickable.

Regards
Timba