Jump to content

Make images clickable in the carousel

Recommended Posts

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).

 

1814585504_Screenshot2021-12-21121642.thumb.png.fceb43d96a142dd48db5204e77d05600.png

Edited by Spence500
Link to comment
  • Replies 47
  • Created
  • Last Reply

Top Posters In This Topic

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.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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? 

Link to comment
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.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Link to comment
  • 4 months later...
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?

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Link to comment
  • 2 weeks later...

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.