Make images clickable in the carousel

Hi there, I'm curious as to how I would go about creating clickthrough URL's on the individual cards I created in Figma. I'm utilizing an image content section that is designed as a carousel and I uploaded hard designed/flattened "cards" as images in the carousel. I want to make each card it's own clickthrough link to that companies website. I have the option of creating buttons as clickthrough's that live beneath the cards, but I want the clickthrough to live directly on the individual card/image components themselves. Anyone have an idea on how to do this?  (I'm proficient in coding so feel free to drop some ideas when it comes to DOM manipulation).

Hi,

Add button for these items >> Then share link to page in screenshot, we will give the code to hide button + pass button link to image link.

On 12/25/2021 at 2:51 AM, tuanphan said:

Hi,

Add button for these items >> Then share link to page in screenshot, we will give the code to hide button + pass button link to image link.

 

When you say add button for these items, are you referring to adding the button below each item/card or one universal button underneath the carousel? 

21 hours ago, Spence500 said:

When you say add button for these items, are you referring to adding the button below each item/card or one universal button underneath the carousel? 

Button below each item, you can edit Carousel to enable/add buttons.

11 hours ago, tuanphan said:

Button below each item, you can edit Carousel to enable/add buttons.

 

Wonderful! I've added the buttons to each element. Here is the URL.

7 minutes ago, Spence500 said:

Wonderful! I've added the buttons to each element. Here is the URL.

Sorry, just take out the "squarespace" part in the URL lol.

https://imtecdigitalsolutions.com/our-partners-wip-2022

The url doesn't exist.

6 hours ago, tuanphan said:

https://imtecdigitalsolutions.com/our-partners-wip-2022

The url doesn't exist.

The URL you typed in starts with an "I". It's supposed to be an "L".

Add to Design > Custom CSS

/* Our Partners logo clickable */
body#collection-61ba2aa907dad206d5e0b689 {
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;
}}

On 1/2/2022 at 4:53 AM, tuanphan said:

Add to Design > Custom CSS

/* Our Partners logo clickable */
body#collection-61ba2aa907dad206d5e0b689 {
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;
}}

 

That worked, thank you so much my friend!

On 1/2/2022 at 2:53 AM, tuanphan said:

Add to Design > Custom CSS

/* Our Partners logo clickable */
body#collection-61ba2aa907dad206d5e0b689 {
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;
}}

 

I'm having the same issue. I'm using a image carousel list and would like all the images to be clickable but cant figure out how to do it. Can you help?

On 6/4/2022 at 1:41 AM, Shakeyra said:

I'm having the same issue. I'm using a image carousel list and would like all the images to be clickable but cant figure out how to do it. Can you help?

If you share link to page where you added carousel, we can tweak the code easier

@tuanphanwould you be able to help with making the carousel images clickable on the following page" storytiling.com/send-video-message

Would be amazing to get your help on this!

On 7/15/2022 at 12:45 PM, BenST said:

@tuanphanwould you be able to help with making the carousel images clickable on the following page" storytiling.com/send-video-message

Would be amazing to get your help on this!

I see you figured it out?

Hey there, could you help me too to twitch the link? 

The carousel is on the homepage at 'a glimpse of my work'. 

Link: https://peterorsel.com/ 

On 8/3/2022 at 3:21 PM, Peter16 said:

Hey there, could you help me too to twitch the link? 

The carousel is on the homepage at 'a glimpse of my work'. 

Link: https://peterorsel.com/ 

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>

1 hour ago, 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>

 

Thanks a lot!! One more question, I used this and it works, but it's opening in a new tab. Is there a little addition possible that makes it open in the same tab? Thanks so much!

Never mind, fixed that already after some easy Googleing. Changed the target blank to target self and it miraculously worked 😉

Site URL: https://www.history-ink.com/

Hi there, 

I wondered if you could help me make the images clickable on my carousel, as there seems no obvious way to do it. Note I wish to keep the buttons, but make the images clickable as well. 

In my portfolio section of the home page, screen shot attached.  

Thank you! 

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="_self">` )
      
      	.get ( 0 )
        
        .click ( );
        
      } );
      
    } );
    
  } );
  
  </script>
<style>
  .user-items-list-item-container[data-section-id="62b3054db9b78b76bf547ece"] .user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-item-container[data-section-id="62b3054db9b78b76bf547ece"] .user-items-list-carousel__gutter {
    cursor: pointer;
}
</style>

Hi, 

I also would love some help to get the carousel images to be click-through links.

The page  is: https://www.nmeplastic.com/themanual/therightbin

Thanks so much!

19 hours ago, Jack2406 said:

Hi, 

I also would love some help to get the carousel images to be click-through links.

The page  is: https://www.nmeplastic.com/themanual/therightbin

Thanks so much!

You mean this section?

Waste-saving recipes

Thanks so much for the quick response! Yes the 'waste-saving recipes' section and the 'zero-waste staff food' section. Both are carousel images that I would love to put links on the images.

Hi, Sorry I didn't add the buttons to each carousel image on the page. I've done that now, let me know if you're able to help. Thanks

On 9/15/2022 at 10:33 PM, Jack2406 said:

Hi, Sorry I didn't add the buttons to each carousel image on the page. I've done that now, let me know if you're able to help. Thanks

 

Try adding to Design > Custom CSS

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