(Squarespace) Make List Carousel Image Clickable

Pro Tips Other Tips
1

To make List Section Carousel Image Clickable, you can follow these steps

image
image1636Ă—735 91.5 KB

  • Enable List Buttons
  • Add links to these buttons
  • Add code to Custom CSS (Website > Website Tools > Custom CSS) (see code below). The code will hide buttons + turn button links to image links
  • Change Data Section ID. Use this free tool to find ID

Code here

/* List Carousel Clickable */
[data-section-id="XXXXXXXXXXXXX"] {
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;
}}

I also did a quick video here:

9 Likes
2

This is great! Is there to have BOTH the button and the image be clickable?

1 Like
3

Here I use code to make the button cover the whole item so the button will disappear.
If you use a Business Plan or higher, you can remove the code, and use this new code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $( ( ) => {
  
    const selector = '.user-items-list-carousel__slides .list-item';
    
    $( selector ).each ( function ( ) {
    
      const $this = $( this );
      
      $( $this ).click ( function ( ) {
      
      const url = $( '.list-item-content__button', $this )
      
        .attr ( 'href' );
        
      $( `<a href="${ url }" target="_self">` )
      
      	.get ( 0 )
        
        .click ( );
        
      } );
      
    } );
    
  } );
</script>

<style>
.user-items-list-carousel__slide {
    pointer-events: initial !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}
</style>

If you use Personal Plan and doesn’t support Code Injection, you can let me know, I will test some code and give you code

2 Likes
4

Hi tuanphan! First of all: thank you so much for all your fantastic work.

My question: How can your carousel solution be applied if I’m on a Personal Plan, e.g., using code blocks?

As with other people here, I need each carousel item to be clickable like a card (image + text), and the buttons to be hidden.

Thanks a lot in advance :slight_smile: Have a great weekend!

1 Like
5

#1. Top code is CSS code. Personal Plan supports CSS code.
#2. The code will move button cover whole item, so whole item will be clickable.
The code also make button transparent, so users won’t button.

1 Like
6

Wow, you’re fast! Thank you kindly!

I understand now, and it works. Sorry for the confusion, I am new to it all.

I have a follow-up question: is there a way to add a hover effect to the carousel items now? It would be great if the image had an overlay when hovering anywhere above the carousel item.

Frame 12
Frame 122122Ă—709 368 KB

7

You can consider change opacity of images, instead of overlay, I see both look similar.
You can use this CSS code

li.user-items-list-carousel__slide.list-item:hover img{
    opacity: 0.2 !important;
}
li.user-items-list-carousel__slide.list-item {
    pointer-events: initial !important;
    user-select: initial !important;
}

image
image686Ă—652 57.9 KB

8

Thank you so much! :star_struck:

9

Hi Tuan!
Using children, how can I make this work on only one item in a list?

1 Like
10

Nevermind I figured it out! Just add li:nth-child(4) after the section.

1 Like
11

Hey there and welcome to the Community @Miriam_Hiersteiner :wave:

Great to hear that you were able to adjust the code to fit your needs!

If you have any questions about our apps or services, don’t hesitate to post your request in the Ask the Community category. We’re here to help! :wink:

And if you need specific advice about Squarespace, our expert @tuanphan would be more than happy to assist!

12

Hello. The code works great, and I am super happy with it! I am needing to do this on multiple pages for my Squarespace website. I have cloned the carousel section to the pages and have been copying the code (see below) for each page- which will 11 pages. Is there a way to do this with one set of code, or is what I am doing okay?

/* List Carousel Clickable “Type 1”*/
section[data-section-id=“66dcbdc9ffecd37705418fe0”] {
li.list-item {
position: relative;
}
.list-item-content__button-container {
position: static;
}
…etc

/* List Carousel Clickable “Homepage”*/
section[data-section-id=“66f5d118e8c55c6880909655”] {
li.list-item {
position: relative;
}
… etc

13

to apply for all carousels, just replace this

[data-section-id="XXXXXXXXXXXXX"]

with this

section[data-section-id]
1 Like
14

or replace with this

[data-section-id="enter id1"], [data-section-id="enter id2"], [data-section-id="enter id3"]
2 Likes
15

This worked! Thank you very much!

1 Like