Make images clickable in the carousel

Thanks so much! It worked for the section under waste-saving recipes. Would you please be able to do the same for the carousel images under the Zero Waste Staff Food section on the same page?

Thanks again for your time - it's much appreciated.

12 hours ago, Jack2406 said:

Thanks so much! It worked for the section under waste-saving recipes. Would you please be able to do the same for the carousel images under the Zero Waste Staff Food section on the same page?

Thanks again for your time - it's much appreciated.

Use this new code

/* List carousel clickable */
.user-items-list-item-container[data-section-id="6319dfbecb1930144b4dd9e3"], .user-items-list-item-container[data-section-id="631a04c48a1f5a0ae0b38625"] {
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;
}}

It works, thanks a lot!

Hello,

I'd love some assistance with click through images on my home page. I've already added the buttons as mentioned above.

This is the link: https://www.quick2hire.co.uk/

Thank you in advance!

On 10/14/2022 at 7:38 PM, Quick2Hire said:

Hello,

 

I'd love some assistance with click through images on my home page. I've already added the buttons as mentioned above.

 

This is the link: https://www.quick2hire.co.uk/

 

Thank you in advance!

Add to Design > Custom CSS

/* Carousel clickable */
.user-items-list-item-container[data-section-id="633c1b0fd68bcd316fecec7a"] {
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;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    display: none !important;
}}

Hi there, I have a similar request! Could you help me to hide the buttons in the carousel at my homepage and make the images clickable?
https://www.neeltjekleijn.com/

On 11/28/2022 at 10:19 PM, elliedepoes said:

Hi there, I have a similar request! Could you help me to hide the buttons in the carousel at my homepage and make the images clickable?
https://www.neeltjekleijn.com/

Use this new code

/* Carousel clickable */
.user-items-list-item-container[data-section-id="637e505d36ea19641d82cafe"] {
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;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    display: none !important;
}}

Hi can you please help me too?
This is our website: https://www.homekeeper.pt/ 
It's the carousel under the highlighted properties.
Is is too much to ask also to add some hover effect (fade out)?

Thank you in advance

On 12/22/2022 at 8:05 PM, Bewarenana said:

Hi can you please help me too?
This is our website: https://www.homekeeper.pt/ 
It's the carousel under the highlighted properties.
Is is too much to ask also to add some hover effect (fade out)?

Thank you in advance

Use this CSS code

/* Highlight properties */
.user-items-list-item-container[data-section-id="63a4292fe37c966117b09b49"] {
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;
}}

Hi I am looking for help with the same thing!! This is the link https://nainapasricha.com/work/ux-88f2n - thank you so much

On 1/12/2023 at 6:02 AM, Naina said:

Hi I am looking for help with the same thing!! This is the link https://nainapasricha.com/work/ux-88f2n - thank you so much

Use this CSS

.user-items-list-item-container[data-section-id="63bf15dbd2978e1b07709ce8"] {
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;
}}

Hello, @tuanphan

Thank you for this code! I've tried to use it on my website, but unfortunately it doesn't work...

I have a similar carousel list (see screenshot attached) and I need to make my images clickable, and at the same time be able to scroll the carousel with adjacent slides. Is there a custom code solution for this? 

Also I would like to ask if I can make the buttons invisible? (Just the title and description below the image).

Maybe I need to add a link to description to make the image clickable?

Thank you in advance 🙏 

Website link: https://sparrow-tomato-zxzd.squarespace.com

Password: testmode1568

On 8/5/2022 at 9:55 AM, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $( ( ) => {
  
    const selector = '.user-items-list-carousel__slides .list-item';
    
    $( selector ).each ( function ( ) {
    
      const $this = $( this );
      
      $( $this ).click ( function ( ) {
      
      const url = $( '.list-item-content__button', $this )
      
        .attr ( 'href' );
        
      $( `<a href="${ url }" target="_blank">` )
      
      	.get ( 0 )
        
        .click ( );
        
      } );
      
    } );
    
  } );
</script>
<style>
  .user-items-list-item-container[data-section-id="62dac38a00902b10848f73f0"] .user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-item-container[data-section-id="62dac38a00902b10848f73f0"] .user-items-list-carousel__gutter {
    cursor: pointer;
}
</style>

 

Hello, @tuanphan

Thank you for this code! I've tried to use it on my website, but unfortunately it doesn't work...

I have a similar carousel list (see screenshot attached) and I need to make my images clickable, and at the same time be able to scroll the carousel with adjacent slides. Is there a custom code solution for this? 

Also I would like to ask if I can make the buttons invisible? (Just the title and description below the image).

Maybe I need to add a link to description to make the image clickable?

Thank you in advance 🙏 

Website link: https://sparrow-tomato-zxzd.squarespace.com

Password: testmode1568

Hi there! I would also love help having my carousel images link to my corresponding portfolio pages. Note I do not want to add the button, I just want the text and clickable images.

https://www.ellicefordphotography.com/

On 1/22/2023 at 6:43 PM, yuliamazur said:

Hello, @tuanphan

Thank you for this code! I've tried to use it on my website, but unfortunately it doesn't work...

I have a similar carousel list (see screenshot attached) and I need to make my images clickable, and at the same time be able to scroll the carousel with adjacent slides. Is there a custom code solution for this? 

Also I would like to ask if I can make the buttons invisible? (Just the title and description below the image).

Maybe I need to add a link to description to make the image clickable?

Thank you in advance 🙏 

Website link: https://sparrow-tomato-zxzd.squarespace.com

Password: testmode1568

Site url doesn't exist. Can you check it again?

On 1/25/2023 at 6:53 AM, ElliceF said:

Hi there! I would also love help having my carousel images link to my corresponding portfolio pages. Note I do not want to add the button, I just want the text and clickable images.

https://www.ellicefordphotography.com/

You can add buttons, then we will transfer button link to image link + hide buttons then

8 hours ago, tuanphan said:

Site url doesn't exist. Can you check it again?

Hey @tuanphan, sorry, I have updated the site url. 

Here it is: https://www.ochi-studio.com/home 

I've added the buttons below carousel images for users to click on them, but I'd prefer to remove the buttons and make the images clickable + be able to scroll the carousel with adjacent slides. 

The specific section I'm refering to is this one: section[data-section-id="63cd14eaab5f09481fb2a2a4"]

Thank you!!!

21 hours ago, yuliamazur said:

Hey @tuanphan, sorry, I have updated the site url. 

Here it is: https://www.ochi-studio.com/home 

I've added the buttons below carousel images for users to click on them, but I'd prefer to remove the buttons and make the images clickable + be able to scroll the carousel with adjacent slides. 

The specific section I'm refering to is this one: section[data-section-id="63cd14eaab5f09481fb2a2a4"]

Thank you!!!

Add to Design > Custom CSS

/* List Section - Make list images clickable */
[data-section-id="63cd14eaab5f09481fb2a2a4"] {
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;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}}

2 hours ago, tuanphan said:

Add to Design > Custom CSS

/* List Section - Make list images clickable */
[data-section-id="63cd14eaab5f09481fb2a2a4"] {
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;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}}

 

Thank you so much @tuanphan, it worked great!! 

Just one question, is it possible to scroll this clickable images by clicking+dragging? When I'm trying to drag the items with cursor it's not possible to move them, only click is available. I've attached the video to explain better. 

There's a similar product view section in the second video I've attached where you can both click & drag + click to view the product page. Is there any posibility to do the same in my case? The website where I've seen this carousel scroll is this one: https://www.nakedcph.com/en 

Thank you 🙏 

On 1/26/2023 at 11:20 PM, tuanphan said:

You can add buttons, then we will transfer button link to image link + hide buttons then

Ok, I have done that.

https://www.ellicefordphotography.com/

On 1/28/2023 at 7:18 PM, yuliamazur said:

Thank you so much @tuanphan, it worked great!! 

Just one question, is it possible to scroll this clickable images by clicking+dragging? When I'm trying to drag the items with cursor it's not possible to move them, only click is available. I've attached the video to explain better. 

There's a similar product view section in the second video I've attached where you can both click & drag + click to view the product page. Is there any posibility to do the same in my case? The website where I've seen this carousel scroll is this one: https://www.nakedcph.com/en 

Thank you 🙏 

2071722702_ScreenRecording2023-01-28at13_09_00.mov Screen Recording 2023-01-28 at 13.13.01.mov

Because that code disable this behavior. If you use a Business Plan/higher, let me know, I will give new code, instead of current code

On 1/31/2023 at 5:25 AM, ElliceF said:

Ok, I have done that.

https://www.ellicefordphotography.com/

Add to Design > Custom CSS

/* List Section - Make list images clickable */
.user-items-list-item-container[data-section-id="63b62c75900fec26a01ab5a7"] {
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;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}}

6 minutes ago, tuanphan said:

Because that code disable this behavior. If you use a Business Plan/higher, let me know, I will give new code, instead of current code

Add to Design > Custom CSS

/* List Section - Make list images clickable */
.user-items-list-item-container[data-section-id="63b62c75900fec26a01ab5a7"] {
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;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}}

 

I’m using the commercial plan, so I think I’ll be able to insert another code. 
I’m waiting to hearing from you.
I’d appreciate your help very much!

thank you

Hello,

I would also love some help making the images on the carousal on the homepage clickable. I tried some code you suggestes but a white oval shape was appearing on the images. Are you also able to have the link open in a new window?

https://creanto.com/

Much appreciated
 

On 2/2/2023 at 9:27 AM, tuanphan said:

Because that code disable this behavior. If you use a Business Plan/higher, let me know, I will give new code, instead of current code

Add to Design > Custom CSS

/* List Section - Make list images clickable */
.user-items-list-item-container[data-section-id="63b62c75900fec26a01ab5a7"] {
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;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}}

 

This worked. Thanks so much!!

On 2/2/2023 at 1:57 PM, tuanphan said:

Because that code disable this behavior. If you use a Business Plan/higher, let me know, I will give new code, instead of current code

Add to Design > Custom CSS

/* List Section - Make list images clickable */
.user-items-list-item-container[data-section-id="63b62c75900fec26a01ab5a7"] {
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;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}}

 

Hey @tuanphan! Thanks for your help!

I'm using the commercial plan so I think I'm able to insert the new code. Please send the new one when you can, I'd appreciate this very much!!!