Jump to content

Making Carousel Images Clickable without adding a button at the bottom

Recommended Posts

  • Replies 5
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 weeks later...
  • 1 year later...
On 10/3/2023 at 10:20 PM, tdc-kristin said:

Hi @tuanphan I am trying to make my carousel images clickable and hide the buttons under the images. Would you be able to help me accomplish that?

You can share link to page where you added carousel, then we can give exact code for your case

You can also use this code (Website Tools (under Not Linked) > Custom CSS) but it will apply to all carousels

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.