Jump to content

Make images clickable in the carousel

Recommended Posts

23 hours ago, Dilon said:

@tuanphan I tried to put that code in the footer code injection but unfortunately it didnt work. Still unable to click and drag the carousel.

FYI - This is what I currently have in CSS to make the button the size of the image and it is disabled for mobile.
 

/* Make carousel image clickable, disables in mobile (only works when button for carousel is enabled) */
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;
}

@media (max-width: 767px) {
  a.list-item-content__button.sqs-block-button-element {
    display: none;
  }
  .user-items-list-carousel__slide {
    pointer-events: none !important;
    user-select: none !important;
  }
}

You need to disable your CSS first, then add code I sent

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 5/6/2023 at 7:55 AM, MikieB said:

Can  you help me hide the buttons and make the carousel images clickable?  https://www.sonoita.io/

Add to Design > Custom CSS

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/15/2023 at 8:16 PM, FAC said:

Hi, could you help me make my carousel images clickable? https://www.fairfieldathleticclub.com/ Thanks 

If whole carousel to 1 link, I can help

But each image >> a different link > This is not possible

image.thumb.png.f6c37c38ec1c7d04108821caa5f1a703.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
11 hours ago, tuanphan said:

If whole carousel to 1 link, I can help

But each image >> a different link > This is not possible

image.thumb.png.f6c37c38ec1c7d04108821caa5f1a703.png

It would be for each image, but at least now I know it can't be done. Thanks for trying!

Link to comment
On 5/15/2023 at 6:16 AM, FAC said:

Hi, could you help me make my carousel images clickable?

Unless I'm missing something here.

Edit your gallery block.

Hover over an image and click the gear icon.

ScreenShot2023-05-22at11_28_08AM.png.efb06976a9a92730e609f60955a181c3.png

Enter the URL.

ScreenShot2023-05-22at11_29_08AM.png.135baf3ecb118b60213124ba73e6e14e.png

Save everything.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
2 hours ago, Emmadubbs said:

Can you just help me

Your site is private.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 5/31/2023 at 6:27 PM, mvspjp said:

Hi! 

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 me? Here is a link to my page. It is a cover page. Does that make it a problem? 

https://plando.dk/

You mean this carousel?

image.thumb.png.ca048363ef2ac7e18062df997781fd70.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 6/7/2023 at 4:10 PM, mvspjp said:

Thank you for responding so quickly @tuanphan
Yes, exactly 🙂 Can you help fix it, or is it a problem, that it's on our cover page?

If you can enable buttons, I can give code to turn button link to image link + give code to make buttons invisible then

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 6/9/2023 at 1:50 PM, mvspjp said:

That woud be great! I have enabled buttons: https://plando.dk/ 

Add to Design > Custom CSS
 

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
21 hours ago, MarketingFounderMade said:

Hi could you provide custom code so that each image in the carousel (under title Member Listings) , links to their blogs in the membership section, preferably in a lightbox.

Website is www.foundermade.com.

Page I'm referring to is www.foundermade.com/membership.

Thank you!

Can you check again? I don't see Member Listings

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
23 hours ago, tuanphan said:

Add to Design > Custom CSS
 

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

 

It worked. Thank you very much 🙂 

Link to comment

 

On 2/15/2023 at 5:22 PM, tuanphan said:

Yes. You can remove CSS code I sent, I will give new Java code

Hello! I'm currently working on making my carousel slider images clickable too. My goal is to remove the buttons and make the images themselves clickable links. Additionally, I would like the images to slide and be movable. The codes you have provided don't seem to allow for dragging the images to browse through the carousel. Would you mind assisting me with this? Your help would be greatly appreciated. Thank you!

Link to comment
On 4/24/2023 at 7:04 PM, tuanphan said:

You need to disable your CSS first, then add code I sent

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

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.