hyperlink images in carousel?

hi, is it possible to add clickable links to each of the images in a carousel? and if so, can those links open a new window? version 7.1 

Hi. You can add item buttons, then use this code to transfer button link to image link & make buttons invisible

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;
}
.list-item-content__button-container {
    position: static !important;
}

Next, share link to page where you use carousel, we will check & give code to make it open in new window

hi tuanphan, thanks for the reply. below is a link to the page (it's a single-page site).

we'd like to have each of the individual images in the carousels under Work News, Media and Writing link out/open a new window. All of these carousels are built the same way, so I'm sure code for one will work for all.

https://bison-beige-k2xs.squarespace.com/

pasword: mb

On 7/31/2022 at 10:30 PM, hman22 said:

hi tuanphan, thanks for the reply. below is a link to the page (it's a single-page site).

we'd like to have each of the individual images in the carousels under Work News, Media and Writing link out/open a new window. All of these carousels are built the same way, so I'm sure code for one will work for all.

https://bison-beige-k2xs.squarespace.com/

pasword: mb

Add this to Design > Custom CSS

/* Make Work items clickable */
body.homepage {
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;
}
.list-item-content__button-container {
    position: static !important;
}
}