Linking each image in slider to a different page

Hi,

I have the solution for this and you can follow from this link:

https://www.ads-software.com/support/topic/header-menu-color-overlay-customisation/#post-7644337

Regards,
Kharis

@kharisblank Thanks I will try that.

I tried that but didn’t work? Placed this script in “Scripts in footer”

<script type=”text/javascript”>
(function($){

if( $(‘.header-slider’).length ){

var slideLink1 = ‘‘;
var slideLink2 = ‘‘;
var slideLink3 = ‘‘;
var slideLink4 = ‘‘;
var slideLink5 = ‘‘;

if($(‘.slide-item:nth-of-type(1)’).length){
$(‘.slide-item:nth-of-type(1)’).wrapInner(slideLink1);
}

if($(‘.slide-item:nth-of-type(2)’).length){
$(‘.slide-item:nth-of-type(2)’).wrapInner(slideLink2);
}

if($(‘.slide-item:nth-of-type(3)’).length){
$(‘.slide-item:nth-of-type(3)’).wrapInner(slideLink3);
}

if($(‘.slide-item:nth-of-type(4)’).length){
$(‘.slide-item:nth-of-type(4)’).wrapInner(slideLink4);
}

if($(‘.slide-item:nth-of-type(5)’).length){
$(‘.slide-item:nth-of-type(5)’).wrapInner(slideLink5);
}

}

})(jQuery);
</script>

It cut out the 5 links I had

Can be seen here – https://drive.google.com/file/d/1V0oNhxoQvmVjVw96JzEYdtaw-Q7eootO/view?usp=sharing

Hi,

I can’t access the files as permission required. I have been sending the permission request. Please let me know when you have approved my request.

Regards,
Kharis

Hope you received it Kharis.

Hi,

I received it. Thank you!

I checked the slide links have been added to slide images. But you need to add the below CSS code to Appearance > Customize > Additional CSS from dashboard to make each new link wraps the entire slide image area.

.slide-item > a {
  display: block;
  width: 100%;
  height: 100%;
}

Regards,
Kharis

Thanks Kharis, did that but didn’t work.

Hi @myokonagano,

You might need to clear cache (if it has been enabled) on your website and try reloading it.

Regards,
Kharis

Okay, that’s linking the text now, but not the button?

You will need separate jQuery code solution for slide buttons, which you can find it in this thread:

https://www.ads-software.com/support/topic/cant-add-additional-page/#post-9439837

Regards,
Kharis

Thanks. Do I add it below the current code in there? Or do I delete what is there?

jQuery(function($) {

if( $(‘.widget_sydney_testimonials .roll-button’).length ){

$(‘.widget_sydney_testimonials .roll-button’).attr(‘target’, ‘_blank’);

}

});

@kharisblank Sorry for the late reply, I couldn’t try it until now. I tried it now and it works, thanks a lot. But the titles on the sliders are white and are not always very visible depending on the picture. Is there a way to add a black box around the title to make it more visible (the black should be slightly transparent to reveal the picture behind it). Is there a way to do that?

Hi,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

.header-slider .text-slider {
  background-color: rgba(0,0,0,0.3);
}

Regards,
Kharis