How to Make Images / Text in Carousel Buttons to Link To Different Parts of Site

Hi There, 

I want my portfolio work to be displayed on a carousel but I want each item on the carousel to be a button that users can click to lead them to different pages in my site, but not have an actual button underneath each item. How do I do this?

Hi,

You can use List Section Carousel, enable item buttons, then use this code to Custom CSS box to turn button link to image/title link (this code also make buttons invisible then)

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

thank you sooo much. you are a life saver. i can't understand why Squarespace hasn't prioritized this option. They there are so many uses for it. It can't really be that complicated to make it standard. we need it for partners and press. 

Hi there! I used the code above, however it is not showing the link cursor on hover. Any chance there is a way to add this? Thanks!

On 7/4/2024 at 11:57 PM, MelDav said:

Hi there! I used the code above, however it is not showing the link cursor on hover. Any chance there is a way to add this? Thanks!

Can you share link to page where you use carousel? I will check it again

@tuanphan Here is the site in-progress: https://apricot-plums-l4d4.squarespace.com/remodel Password: WHIT_LOS_2024 It's halfway down this page. the first one is linking to a project page but it is not showing cursor

On 7/9/2024 at 8:15 PM, MelDav said:

@tuanphan Here is the site in-progress: https://apricot-plums-l4d4.squarespace.com/remodel Password: WHIT_LOS_2024 It's halfway down this page. the first one is linking to a project page but it is not showing cursor

I see it already changed cursor to a hand icon. Or you want to change another icon?

@tuanphan I am not seeing a hand icon on the image or the title/text when hovering. It is only a cursor on all of them. 

On 7/14/2024 at 6:29 PM, MelDav said:

@tuanphan I am not seeing a hand icon on the image or the title/text when hovering. It is only a cursor on all of them. 

I see it is fine here or I checked wrong section. See video

https://www.loom.com/share/7d882dff1eb54f6a935ea2036d126158

On 8/19/2023 at 7:38 AM, tuanphan said:

Hi,

You can use List Section Carousel, enable item buttons, then use this code to Custom CSS box to turn button link to image/title link (this code also make buttons invisible then)

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

 

Hi tuanphan, 

Somehow this code does not work for us. Could it be that recent updates prevent this? 

Thanks!

On 8/23/2024 at 5:25 PM, ThijsKairos said:

Hi tuanphan, 

Somehow this code does not work for us. Could it be that recent updates prevent this? 

Thanks!

Can you share link to page where you use carousel? I will check again

Is this below code works for anyone? I am facing issues in it:

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

On 8/31/2024 at 3:54 PM, Rahosing said:

Is this below code works for anyone? I am facing issues in it:

 

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

Use this new code

li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .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;
}
.list-item-content--hidden {
    display: block !important;
}

Hi @tuanphan: Your code was so helpful! I was also looking for a way to add a clickthrough URL to my carousel images. What part of the code can I leave out (or adjust) to KEEP the button with the clickthrough URL in addition to enabling the clickthrough URL on the images themselves? Thanks so much!! 

On 10/21/2024 at 7:30 AM, Steph333 said:

Hi @tuanphan: Your code was so helpful! I was also looking for a way to add a clickthrough URL to my carousel images. What part of the code can I leave out (or adjust) to KEEP the button with the clickthrough URL in addition to enabling the clickthrough URL on the images themselves? Thanks so much!! 

You mean make carousel image clickable + but still keep button?