Make images clickable in the carousel

On 6/16/2023 at 3:18 PM, Braydenn said:

@tuanphanHey Mr Tuanphan, I am having the same issue as Dylan. I am unable to make the carousel slider drag and move and at the same time have clickable image links to another page (while targeting self)

This is my current code I've added that has worked but does not allow for me to drag and move the carousel.

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

You can remove the line

user-select: unset !important;

@tuanphan hello! Would you mind helping me turn my carousel into individual clickable links where the buttons are hidden? My site isn't live yet, does it need to be?

On 6/21/2023 at 2:23 AM, LouisaC said:

@tuanphan hello! Would you mind helping me turn my carousel into individual clickable links where the buttons are hidden? My site isn't live yet, does it need to be?

You can setup site access password & share url, we can help easier

https://forum.squarespace.com/topic/216243-how-to-setup-password-share-site-url/

On 6/20/2023 at 4:31 PM, tuanphan said:

You can remove the line

user-select: unset !important;

@tuanphan It didn't work 😢 This is what I changed''/* Make carousel clickable */
.user-items-list-item-container[data-section-id="641a8b68ef65212d4e0b0ca0"] {
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-items-list-carousel__gutter {
    cursor: pointer;
}}'' lmk what can be done, thank u for ur help sir 🙂 i appreciate u

19 hours ago, Braydenn said:

@tuanphan It didn't work 😢 This is what I changed''/* Make carousel clickable */
.user-items-list-item-container[data-section-id="641a8b68ef65212d4e0b0ca0"] {
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-items-list-carousel__gutter {
    cursor: pointer;
}}'' lmk what can be done, thank u for ur help sir 🙂 i appreciate u

Can you share page url? We can check easier

Hi there, Using the code that's been pasted on this topic has helped me do what I need so thanks for that. However, as the buttons are styled with a gradient, already using custom css, it shows up a gradient box (I've only added 2 buttons for now). Is there anyway to include in this code that it needs to use the tertiary style button? If so it'd be hugely appreciated. Thanks!

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

4 hours ago, PWinter said:

Hi there, Using the code that's been pasted on this topic has helped me do what I need so thanks for that. However, as the buttons are styled with a gradient, already using custom css, it shows up a gradient box (I've only added 2 buttons for now). Is there anyway to include in this code that it needs to use the tertiary style button? If so it'd be hugely appreciated. Thanks!

 

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

Can you share link to this page? We can check easier

7 minutes ago, tuanphan said:

Can you share link to this page? We can check easier

Sure, here you go: https://socreative-portfolio.squarespace.com/
Login is all lowercase, password

Thanks for the speedy reply 🙂

8 hours ago, PWinter said:

Sure, here you go: https://socreative-portfolio.squarespace.com/
Login is all lowercase, password

Thanks for the speedy reply 🙂

Add this code under to remove gradient

body.homepage a.list-item-content__button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary {
    background-image: none !important;
}

7 hours ago, tuanphan said:

Add this code under to remove gradient

body.homepage a.list-item-content__button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary {
    background-image: none !important;
}

 

Thank you so much for the speedy response. 

On 7/3/2023 at 2:09 PM, Braydenn said:

@tuanphan hi there Mr Tuanphan! here is my website url and password

website url: dailycine.co/testhomedevpreview-1

Password: testhome

I have also attached a screenshot and notes on what i would like to do. I've also used custom code to make the carousel  show abit of the next item. Thank you so much for your help in advance sir. You've helped me greatly in the past and i appreciate it very much. 

 

Thank for your image. Do you use Personal or Business Plan? I guess draggable will require a Business Plan with jQuery code

4 hours ago, tuanphan said:

Thank for your image. Do you use Personal or Business Plan? I guess draggable will require a Business Plan with jQuery code

@tuanphan Hi, yes i do use the business plan. Do you have a way for it to make it draggable + make the carousel images bigger? I am currently additional CSS code to make the next carousel images visible on mobile view. Appreciate ur help once again.

20 hours ago, Braydenn said:

@tuanphan Hi, yes i do use the business plan. Do you have a way for it to make it draggable + make the carousel images bigger? I am currently additional CSS code to make the next carousel images visible on mobile view. Appreciate ur help once again.

Try this code 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-carousel__gutter {
    cursor: pointer;
}
   .user-items-list-carousel__slide {
    pointer-events: initial !important;
}
 .user-items-list-item-container[data-section-id="64a26e7218f7284ce0398616"] a.list-item-content__button.sqs-block-button-element {
  	display: none !important;
  }
</style>

Hi,

I'm also wanting to create clickable images from a portfolio banner.I have tried to adapt the code - yet the image links aren't working... Are you able to help? The website is https://www.structuralrenovations.co.uk/ and the portfolio banner is at the bottom of the page. .... Only thing to be mindful of is that I have a services carousel in place which I do want the buttons to show for... Thank you so much for any help or advice you can offer. 🙏

On 7/5/2023 at 10:34 PM, EmmaLouise said:

Hi,

I'm also wanting to create clickable images from a portfolio banner.I have tried to adapt the code - yet the image links aren't working... Are you able to help? The website is https://www.structuralrenovations.co.uk/ and the portfolio banner is at the bottom of the page. .... Only thing to be mindful of is that I have a services carousel in place which I do want the buttons to show for... Thank you so much for any help or advice you can offer. 🙏

You mean this? Can you add some buttons? We can turn button link to image link

hey @tuanphan! the code works, thank you so so much. however i would like to make the images larger in size, it's too small. would u be able to help with that as well? thank u so much in advance. i appreciate u 🙂

On 7/7/2023 at 4:37 AM, tuanphan said:

You mean this? Can you add some buttons? We can turn button link to image link

Hi tuanphan,

Thank you for coming back to me. 

There is already a piece of code hiding the buttons - but the images still don't seem to be linking. Code used as below:- 

body.homepage { 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; } }

Screenshots show section settings. 

Need to ensure these buttons further up that page show, see screenshot of those I'm wanting to keep. 🙂 

Thank you so much for your help. 🙏

On 7/5/2023 at 10:34 PM, EmmaLouise said:

Hi,

I'm also wanting to create clickable images from a portfolio banner.I have tried to adapt the code - yet the image links aren't working... Are you able to help? The website is https://www.structuralrenovations.co.uk/ and the portfolio banner is at the bottom of the page. .... Only thing to be mindful of is that I have a services carousel in place which I do want the buttons to show for... Thank you so much for any help or advice you can offer. 🙏

Use this code

/* carousel clickable */
body.homepage {
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;
}
}

On 7/10/2023 at 4:21 PM, Braydenn said:

hey @tuanphan! the code works, thank you so so much. however i would like to make the images larger in size, it's too small. would u be able to help with that as well? thank u so much in advance. i appreciate u 🙂

Do you still need help?

17 hours ago, tuanphan said:

Do you still need help?

@tuanphan yes, i do 🙂

Hi Tuanphan, I have the same problem, I would like to have link to all carousel images directed to same link. I have added the buttons and this is the link, please can you send me the code?

https://www.cdvstudio.com/

Thank you so much

On 7/18/2023 at 12:07 AM, CdVstudio said:

Hi Tuanphan, I have the same problem, I would like to have link to all carousel images directed to same link. I have added the buttons and this is the link, please can you send me the code?

https://www.cdvstudio.com/

Thank you so much

Use this code (Design > Custom CSS)

/* carousel clickable */
body.homepage {
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;
}
}

On 7/3/2023 at 2:09 PM, Braydenn said:

@tuanphan hi there Mr Tuanphan! here is my website url and password

website url: dailycine.co/testhomedevpreview-1

Password: testhome

I have also attached a screenshot and notes on what i would like to do. I've also used custom code to make the carousel  show abit of the next item. Thank you so much for your help in advance sir. You've helped me greatly in the past and i appreciate it very much. 

 

Try adding to Design > Custom CSS

/* Make List Images bigger */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="64a26e7218f7284ce0398612"] ul img {
    transform: scale(1.3) !important;
}
}

5 hours ago, tuanphan said:

Try adding to Design > Custom CSS

/* Make List Images bigger */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="64a26e7218f7284ce0398612"] ul img {
    transform: scale(1.3) !important;
}
}

 

@tuanphan it works but, the images are cropped and the spaces are smaller. i dont want it to be cropped or have the whitespace between each content to be smaller. Do you have a way around that? Thank you so much for your help sir. 

@tuanphan Hi sir. it would be best if u could help me out on this as soon as possible, thank u. the images are cropped and the spaces are smaller. i dont want it to be cropped or have the whitespace between each content to be smaller. Do you have a way around that? Thank you so much for your help sir.