(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:

4 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