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;
}
}

Hi there

I put the above code in and the buttons disappeared but the images don't seem to have become clickable. Can you take a look?  https://www.kissmyastrology.com/.  thanks for being so generous with your assistance. 

12 hours ago, markhuss said:

Hi there

I put the above code in and the buttons disappeared but the images don't seem to have become clickable. Can you take a look?  https://www.kissmyastrology.com/.  thanks for being so generous with your assistance. 

Use this new coe

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;
    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;
}
}

That one brought back the buttons and they are clickable but the image isn't. Do I need to add anything. I took out the first code and pasted the one above in.  thanks again. The page is on the reports section. https://www.kissmyastrology.com/reports

UPDATE:   I took out the body.homepage and it works.  Thank you so much!!!