Link Images & Titles in Image Carousel

I'm looking for a way to hyperlink both the images and the titles in a carousel gallery in my portfolio. I'd love for the title and images to be visible, but to eventually hide the buttons so that the user can simply click either the image or title to get through to the linked page. Any help with this would be greatly appreciated!

Here is the webpage (carousel is at the bottom): https://www.samantharanlet.com/portfolio/photography 

You rock, tuanphan! This works perfectly. I sincerely appreciate it! 

I am pretty sure I need to do the same thing. How do you implement this script easily?  Thank you both so much.

On 7/8/2023 at 4:03 AM, sabertoothless said:

I am pretty sure I need to do the same thing. How do you implement this script easily?  Thank you both so much.

You can share link to page where you use list section, we can adjust code id for your case 

Hey, can you update this for a mobile version too, because this doesn´t work for Mobile @ our site www.bottegajacobs.com

On 7/8/2024 at 3:30 PM, Paul_Wille said:

Hey, can you update this for a mobile version too, because this doesn´t work for Mobile @ our site www.bottegajacobs.com

It doesn't work on mobile, because on mobile you used a different Carousel, and in this carousel, you haven't enable Button. You can enable button then use this extra code to Custom CSS

/* List clickable */
section[data-section-id="667d7a7030813771141393c7"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.list-item-content__button-container {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}}