(Squarespace) Make List Carousel Image Clickable

Helpful 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