Jump to content

Carousel images clickable without title or button?

Recommended Posts

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!

 

 

Screenshot 2023-01-19 at 9.35.07 AM.png

Link to comment
  • Replies 6
  • Views 2.9k
  • Created
  • Last Reply

Top Posters In This Topic

  • 7 months later...
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 7 months later...

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