Clickthrough for 7.1 Banner Slideshow

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! 

Hi,

I think you can try adding buttons, then we will try some code to turn button link to whole image (&make buttons invisible then)

@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! 

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

@tuanphanI ended up going with a slider plugin, but thank you! 

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?

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

Hi there, 

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

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

Hello @tuanphan ,

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

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?

On 6/11/2022 at 3:52 AM, tuanphan said:

Hi,

I think you can try adding buttons, then we will try some code to turn button link to whole image (&make buttons invisible then)

What's the code? 

On 8/23/2023 at 9:22 PM, tdang said:

What's the code? 

We need site url to check. Each case will require a different code

On 8/26/2023 at 5:10 AM, tuanphan said:

We need site url to check. Each case will require a different code

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

WebsiteURL

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

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?

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

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.

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

@tuanphan looking to make my banner slideshow images clickable as well, I tried to code above but it didn't work, would appreciate if you could take a look.

Thanks in advance!

site: eastwestcenterfoundation.squarespace.com

pw: giving

On 6/8/2024 at 5:48 AM, MariaFY said:

@tuanphan looking to make my banner slideshow images clickable as well, I tried to code above but it didn't work, would appreciate if you could take a look.

Thanks in advance!

site: eastwestcenterfoundation.squarespace.com

pw: giving

Use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>

  $( ( ) => {
  
    const selector = 'section[data-section-id="6660f6b70666bf4cfdf28503"] .list-item';
    
    $( selector ).each ( function ( ) {
    
      const $this = $( this );
      
      $( $this ).click ( function ( ) {
      
      const url = $( '.list-item-content__button', $this )
      
        .attr ( 'href' );
        
      $( `<a href="${ url }" target="_self">` )
      
      	.get ( 0 )
        
        .click ( );
        
      } );
      
    } );
    
  } );
  
  </script>
  <style>
section[data-section-id="6660f6b70666bf4cfdf28503"] li.slide.list-item {
    pointer-events: initial !important;
  cursor: pointer;
}
</style>