Jump to content

hyperlink images in carousel?

Recommended Posts

Hi. You can add item buttons, then use this code to transfer button link to image link & make buttons invisible

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;
}
.list-item-content__button-container {
    position: static !important;
}

Next, share link to page where you use carousel, we will check & give code to make it open in new window

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
On 7/31/2022 at 10:30 PM, hman22 said:

hi tuanphan, thanks for the reply. below is a link to the page (it's a single-page site).

we'd like to have each of the individual images in the carousels under Work News, Media and Writing link out/open a new window. All of these carousels are built the same way, so I'm sure code for one will work for all.

https://bison-beige-k2xs.squarespace.com/

pasword: mb

Add this to Design > Custom CSS

/* Make Work items clickable */
body.homepage {
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;
}
.list-item-content__button-container {
    position: static !important;
}
}

 

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
  • 6 months later...
12 hours ago, markhuss said:

Hi there

I put the above code in and the buttons disappeared but the images don't seem to have become clickable. Can you take a look?  https://www.kissmyastrology.com/.  thanks for being so generous with your assistance. 

Use this new coe

body.homepage {
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

That one brought back the buttons and they are clickable but the image isn't. Do I need to add anything. I took out the first code and pasted the one above in.  thanks again. The page is on the reports section. https://www.kissmyastrology.com/reports

UPDATE:   I took out the body.homepage and it works.  Thank you so much!!! 

Edited by markhuss
left out the link to the page
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.