Hi,
I'm using CMS collection to do a carousel effect. And each image of the carousel shoule be able to redirect to an external URL when I click it. It works well but I found that the default settings is that I can use a button or headline... to trigger the click event. Is it able to just click the image and then trigger the click event? Thanks
There is a way to do this using CSS overrides and some other crazy manipulation of the CMS Collection properties.
What you have to do is use the headline or button as the link, but override the style of the element so it is invisible. The below image shows how to make a button invisible. You set all of the color overrides to have an alpha value of 0 (ex. rgba(255,255,255,0).
If you are using a headline as the link, you do the same thing. You override the color of the headline to be invisible.
What this does is it creates a link that is clickable, but not visible. However, we still need to make the link take up the space of the entire slide. To do that we need to override the CSS.
It sounds like you are creating a carousel since it's a collection, so you could do either of these to target the headline or button and make it so that it's the entire size of the slide.
For button
.carouselSlide .bannerLayoutButton {
display:block;
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
}
For headline
.carouselSlide .js-content-title a {
display:block;
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
}
The downside to this is that these CSS overrides will affect ALL slideshows, so you'll need some way to target only the ones you want. One way of doing that is if it's on a particular page (like the home page) you can add this to the CSS selector:
.comm-page-home .carouselSlide .bannerLayoutButton {}
.comm-page-home .carouselSlide .js-content-title a {}
