Carousel images clickable without title or button?

Hello. Does anyone have a css code or solve for making images in a carousel clickable? I have tried importing all of the partner logos into a gallery (where I know you can add a link) but cannot get the styling of the carousel to resemble the attached screenshot (which is the style I would like). Is there code to create buttons for each image, and then hide the buttons? I really want to avoid having a wall of clickable logos. Help please!

Screenshot attached of the carousel that I would like to make clickable images for.

https://hibiscus-dachshund-wk7b.squarespace.com/our-people

Thank you!

Hi,

You can add Buttons, then we will give code to turn button link to image link + hide buttons then

Hi @tuanphan,

I would love to use that code for this site to hide the buttons and keep the link on the images in the carousel. Is there also a way to make the images shift without using the arrows (but still keep the arrows)?

https://walrus-aqua-869c.squarespace.com/

PW: Portfolio Review

Found and used the code in this post. It worked for hiding buttons and keeping link on image to page. Still interested in code for making the banner slideshow shift without using arrows (automatic carousel).

4 hours ago, kajabrunvoll said:

Still interested in code for making the banner slideshow shift without using arrows (automatic carousel).

Please see the following.

Let us know how it goes.

On 9/17/2023 at 9:29 PM, creedon said:

Please see the following.

Let us know how it goes.

Thank you. Looks like I have to publish the site and connect to my domain to enable adding code to footer. Will let you know once its done 🙂

I made some tweaks to the other solutions on this page and found this to be the best method as covers the full clickable area. Simply replace the data section ID number (within the brackets) with the section ID you're wanting the code to affect. Hope that helps!

[data-section-id="6630bb5d601cbd7fe07ed256"] {
li.list-item {
  position: relative !important;
}
.list-item-content__button-container {
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
a.list-item-content__button.sqs-block-button-element {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  color: transparent !important;
  background-color: transparent !important;
  border: none !important; 
}
.list-item-content__button-container{
  margin: 0 !important;
  padding: 0 !important;
}}

This works for one carousel. Is there a way to get it work for a few different carousels on the same page? Thanks

15 hours ago, Bahar said:

This works for one carousel.

There are several pieces of code referred to in this thread. Which one are you enquiring about?