Make List Carousel Image Clickable

On the homepage, we have a carousel list section. Is it possible to have BOTH the button and the image be clickable?

I'm using this code, but it takes away the button.


https://prima-italy.squarespace.com/
PW: PRIM@IT@LY123!

/* List Carousel Clickable */
[data-section-id="6621b778c0a84d31f4506bbb"] {
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;
}}

Unfortunately, You can't have both clickable at a same time. 

@skali  @tuanphan  This code has worked great for me, thank you! But now in the carousel Mobile View, you are no longer able to swipe left or right. You can only use the arrows beneath. 

Do you all have any suggestions for making carousel images clickable, BUT still enabling the swipe left or right feature over images when on mobile?

On 7/14/2024 at 5:22 AM, Meganaberger said:

@skali  @tuanphan  This code has worked great for me, thank you! But now in the carousel Mobile View, you are no longer able to swipe left or right. You can only use the arrows beneath. 

 

Do you all have any suggestions for making carousel images clickable, BUT still enabling the swipe left or right feature over images when on mobile?

This code will make Button cover whole item, So actually when you click on the image, you also click on the button

I think to make swipe works on mobile, we will need to use new code. (require a Business Plan or higher).

If you use Business/higher plan, you can share link to page where you use carousel, I will give the new code

5 hours ago, tuanphan said:

If you use Business/higher plan, you can share link to page where you use carousel, I will give the new code

@tuanphan Thank you! I do have business plan if you could please share new code. https://www.thebergerfeed.com/

On 7/16/2024 at 9:51 PM, Meganaberger said:

@tuanphan Thank you! I do have business plan if you could please share new code. https://www.thebergerfeed.com/

First, remove above CSS code

Next, use this code to 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="64eccf594cfaf9653e2cb1fa"] .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="64eccf594cfaf9653e2cb1fa"] li.slide.list-item {
  cursor: pointer;
}
</style>

If it doesn't work, you can keep the code, I can check again easier