[Share] Make Carousel Images clickable

You can follow these steps to make List Carousel images clickable.

If you can't make it work, you can comment with link to page where you use carousel, I can check easier.

#1. First, enable Carousel button

#2. Next, edit each item >> Add button URL (We will use code to turn button URL to image URL then)

#3. Install this free tool to find Carousel Section ID

https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

In my example, we will have: section[data-section-id="6684cfe5617dbe6a5461d715"]

#4. Use this code to Custom CSS box.

Remember to replace with your ID.

section[data-section-id="6684cfe5617dbe6a5461d715"] {
.list-item-content__button {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: unset !important;
    opacity: 0;
}
.list-item-content__button-container {
    position: static;
}
.list-item {
    position: relative;
}
.list-item-content__button:hover {
    opacity: 0;
}}

Hi @tuanphan - is it possible to do this without showing the button? I included a screenshot below of my preferred layout. Any help would be greatly appreciated! The site is not currently live. Info below:

url: https://dachshund-rose-rtth.squarespace.com/home

PW: Help2024

2 hours ago, RAMPDigitalMedia said:

Hi @tuanphan - is it possible to do this without showing the button? I included a screenshot below of my preferred layout. Any help would be greatly appreciated! The site is not currently live. Info below:

url: https://dachshund-rose-rtth.squarespace.com/home

PW: Help2024

 

Hi,

The code above, will turn button link to image link + make buttons invisible then. You can check again.