Jump to content

Clickthrough for 7.1 Banner Slideshow

Recommended Posts

Site URL: https://apricot-oarfish-s26l.squarespace.com/

Hey Squarespace experts, I have a banner slideshow on my homepage that I am trying to add two custom features: 1) autoplay after a set duration and 2) make each slide have a clickthrough target. 

site: https://apricot-oarfish-s26l.squarespace.com/
pass: da1234

I understand that the banner slideshow has an option to display a button, but my goal is for minimal UI elements, so if the entire image was a clickable target, that would be great! 

Thanks in advance! 

Link to comment
  • 2 months later...
On 8/18/2022 at 6:06 AM, b00nm00n said:

@tuanphan

Do you have a method for this (adding a clickthrough link to a banner slideshow)? When I set the button display to none, the link also seems to disappear... 

Thanks! 

You need to add buttons, then share link to page where you use banner slideshow, we can give the code to turn button link to whole item + use code to hide button

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
  • 5 months later...
On 8/20/2022 at 5:49 PM, tuanphan said:

You need to add buttons, then share link to page where you use banner slideshow, we can give the code to turn button link to whole item + use code to hide button

Hi, I am in the process of doing this exact same setup. Can I please get some assistance turning my banner slideshow images into clickthrough's?

Link to comment
On 2/10/2023 at 11:02 AM, sundaychops said:

Hi, I am in the process of doing this exact same setup. Can I please get some assistance turning my banner slideshow images into clickthrough's?

Can you share link to page where you added banner slideshow? We can help easier

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
  • 1 month later...
On 3/13/2023 at 11:48 PM, robinhouse said:

Hi there, 

Looking to do the same (have the full image on the slideshow clickable rather than having a button). Can you help please?

 

Just solved a same case yesterday. You can enable button then share link to page where you added slideshow. We can give code to make it clickable + hide buttons with code later

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
  • 3 months later...
On 6/19/2023 at 8:21 AM, platty24_current said:

Hello @tuanphan ,

 

Looking to do the same (have the full image on the slideshow clickable rather than having a button). Could you please help?

 

Can you share link to site?

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
  • 2 months later...
  • 8 months later...
On 5/3/2024 at 12:24 AM, Knoxx said:

I am looking to do this. Here is my website below with buttons.

WebsiteURL

Try this code to Website > Website Tools > Custom CSS

.user-items-list-item-container[data-section-id="663149d7ee4b47248ba89534"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.list-item-content__button-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: unset !important;
}
.user-items-list-carousel .list-item-content__button-container, .user-items-list-banner-slideshow .slide-content {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}
li.list-item {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-banner-slideshow .slides {
    cursor: pointer;
}
.list-item-content--hidden {
    display: block !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
On 5/4/2024 at 5:47 AM, tuanphan said:

Try this code to Website > Website Tools > Custom CSS

.user-items-list-item-container[data-section-id="663149d7ee4b47248ba89534"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.list-item-content__button-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: unset !important;
}
.user-items-list-carousel .list-item-content__button-container, .user-items-list-banner-slideshow .slide-content {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}
li.list-item {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-banner-slideshow .slides {
    cursor: pointer;
}
.list-item-content--hidden {
    display: block !important;
}}

 

Thank you for your assistance. It seems the contact point is only near the text and not the actual image. Is there a way to make the image the point of contact?

Link to comment
On 5/10/2024 at 3:36 AM, Knoxx said:

Thank you for your assistance. It seems the contact point is only near the text and not the actual image. Is there a way to make the image the point of contact?

Remove the code & use this new code

section[data-section-id="663149d7ee4b47248ba89534"] {
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;
}

.slide-content.list-item-card-background {
    position: static !important;
    width: 100% !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
On 5/11/2024 at 11:28 PM, tuanphan said:

Remove the code & use this new code

section[data-section-id="663149d7ee4b47248ba89534"] {
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;
}

.slide-content.list-item-card-background {
    position: static !important;
    width: 100% !important;
}}

 

This works perfectly! Thank you!
Last thing, is it possible to still allow it to be swipeable?
I would love to still keep that as an option.

Link to comment
On 5/13/2024 at 10:23 PM, Knoxx said:

This works perfectly! Thank you!
Last thing, is it possible to still allow it to be swipeable?
I would love to still keep that as an option.

You can remove the code, I will test again new code

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.