Make images clickable in the carousel

On 7/19/2023 at 10:20 PM, Braydenn said:

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

Try this

/* 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;
}
.user-items-list-item-container[data-section-id="64a26e7218f7284ce0398612"] ul {
	grid-gap: 5px 5px !important;
}
}

On 7/19/2023 at 11:20 PM, Braydenn said:

@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 Hey Tuanphan, thanks for getting back tome. However, it's the same issue as before, it works but the images in the carousel are cropped and the whitespace px in between the carousel decreased. I don't want that 😞 Do you have a way around that? Let me know. Thank you for ur help once again 🙂

website url: dailycine.co/testhomedevpreview-1

Password: testhome

Try this new code

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="64a26e7218f7284ce0398612"] ul {
    grid-gap: 5px !important;
}
.user-items-list-item-container[data-section-id="64a26e7218f7284ce0398612"] ul li {
    padding: 0px !important;
}
}

Hi there, I'm having the same issue, would like to make the carousel images on this link into page links.

https://www.thefamilytreatmentservice.com/about-us

Thank you! 

20 hours ago, Chloeb said:

Hi there, I'm having the same issue, would like to make the carousel images on this link into page links.

https://www.thefamilytreatmentservice.com/about-us

Thank you! 

You mean Clinic Staff section?

Hello! I am brand new to squarespace. I am converting my web page now, it is not published / live yet. I created carousels on two pages without realizing I couldn't add links to them. (My fault for assuming.) Is it possible to get help with CSS for this before I connect my domain, or do I need to wait?  I am not sure how to insert code but I can do some research. 

On 8/19/2023 at 10:48 AM, tuanphan said:

You mean Clinic Staff section?

No the Our Therapy Services section - I want to lose the buttons and have the images as clickable links instead! Thanks

On 8/19/2023 at 8:44 PM, asenicz said:

Hello! I am brand new to squarespace. I am converting my web page now, it is not published / live yet. I created carousels on two pages without realizing I couldn't add links to them. (My fault for assuming.) Is it possible to get help with CSS for this before I connect my domain, or do I need to wait?  I am not sure how to insert code but I can do some research. 

You can enable carousel items button, then we can give code to turn button link to whole item link (image, title)

17 hours ago, Chloeb said:

No the Our Therapy Services section - I want to lose the buttons and have the images as clickable links instead! Thanks

Use this code to Custom CSS box

/* Our Theraphy Services */
[data-section-id="64df705f97296f70ccb18afe"] {
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;
}}

Dear tuanphan, I followed your advide and comments here, very helpful. My website is romanbriker.de and I want to make both the images and the text below them in the carousel "Media" as hyperlinks. So I would need to add 8 hyperlinks to 8 images and 8 text parts respectively. Could you help me with that?

Hi tuanphan,

I would like the same thing as several others on this thread. My website is not yet live. Here are the login credentials:

URL: https://dog-gar-8ehe.squarespace.com/

PSWD: help123!

The section I would like to  have the images clickable without buttons is on the WHO WE ARE page under the CONSERVATION PARTNERS logos (clickable images not buttons). 

I have this section on another page and saved as a design section. Will your code work on all sections or need to be built on any page with that section?

Also, will I need to update this code once the site is live?

Thanks!

Hannah

On 8/25/2023 at 2:12 AM, RomanBri said:

Dear tuanphan, I followed your advide and comments here, very helpful. My website is romanbriker.de and I want to make both the images and the text below them in the carousel "Media" as hyperlinks. So I would need to add 8 hyperlinks to 8 images and 8 text parts respectively. Could you help me with that?

You need to enable buttons first > Add url for these buttons, then add this code to Website > Website Tools > Custom CSS

/* Media */
[data-section-id="64df55d59d66fb38e4361e84"] {
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 8/26/2023 at 12:49 AM, hannahleomt said:

Hi tuanphan,

I would like the same thing as several others on this thread. My website is not yet live. Here are the login credentials:

URL: https://dog-gar-8ehe.squarespace.com/

PSWD: help123!

The section I would like to  have the images clickable without buttons is on the WHO WE ARE page under the CONSERVATION PARTNERS logos (clickable images not buttons). 

I have this section on another page and saved as a design section. Will your code work on all sections or need to be built on any page with that section?

Also, will I need to update this code once the site is live?

Thanks!

Hannah

Password is incorrect. Can you check it again?

Hello @tuanphan I would like to make the images in my home page carousel hyperlinked to individual project pages. 

Website is https://www.bren.work/ can you help me out? Thanks! 

On 9/20/2023 at 1:43 AM, winonashoplifts said:

Hello @tuanphan I would like to make the images in my home page carousel hyperlinked to individual project pages. 

Website is https://www.bren.work/ can you help me out? Thanks! 

You can enable List items buttons > Add url to buttons > Then use this code to Website > Website Tools > Custom CSS. The code will hide button + turn button link to image link

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

Hello @tuanphan I'm hoping to achieve the same result with clickable images (as well as read more buttons)  in the carousel in several instances on this website. Please could you help with the code?

I'm looking at the carousel on the home page, the team on who we are and the our work gallery.
www.sunflower-chihuahua-j7lf.squarespace.com

Many thanks,

Ollie

On 9/28/2023 at 6:38 PM, Ollie26 said:

Hello @tuanphan I'm hoping to achieve the same result with clickable images (as well as read more buttons)  in the carousel in several instances on this website. Please could you help with the code?

I'm looking at the carousel on the home page, the team on who we are and the our work gallery.
www.sunflower-chihuahua-j7lf.squarespace.com

 

Many thanks,

Ollie

I see you used Lightbox instead. Do you still need help with clickable images?

Or if no, do you need to click image >> open lightbox, same as button?

Hi @tuanphan,  Yes, on the teams page, I would like to click the images to open the lightbox (same a button) .
On the homepage carousel I would like the image to also link through to the page it goes to.

Many thanks,
Ollie

On 10/2/2023 at 4:23 PM, Ollie26 said:

Hi @tuanphan,  Yes, on the teams page, I would like to click the images to open the lightbox (same a button) .
On the homepage carousel I would like the image to also link through to the page it goes to.

Many thanks,
Ollie

With homepage, add this code to Website Tools (under Not Linked) > 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;
}}

With Team page

Add this code to Custom CSS

/* Team Page */
body#collection-64ae858dce288121907a9dfd {
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;
}}

Hi @tuanphan, could you also help me with the css code to remove the buttons and make the images clickable in my carousel?
https://flair20.tv

Many thanks,
Mehul

On 10/10/2023 at 7:30 PM, flair20tv said:

Hi @tuanphan, could you also help me with the css code to remove the buttons and make the images clickable in my carousel?
https://flair20.tv

Many thanks,
Mehul

Use this code

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

Hi @tuanphan,

I have a similar request and tried to use different solutions provided earlier, but none have worked as I needed. Here is the page: https://gromova-photo.com/portfolio

The target carousel block is "personal branding photoshoots". I already have the buttons with links added, alongside some custom animation for buttons and images on the carousel.

What I require is to add links from buttons (each button forwards to a different page) to the respective images, so that they are not just coloured on the hover, but also clickable. At the same time, I would like to keep the buttons as they are.

Could you please kindly help with that?

On 10/13/2023 at 3:45 PM, gromova_photo said:

Hi @tuanphan,

I have a similar request and tried to use different solutions provided earlier, but none have worked as I needed. Here is the page: https://gromova-photo.com/portfolio

The target carousel block is "personal branding photoshoots". I already have the buttons with links added, alongside some custom animation for buttons and images on the carousel.

What I require is to add links from buttons (each button forwards to a different page) to the respective images, so that they are not just coloured on the hover, but also clickable. At the same time, I would like to keep the buttons as they are.

Could you please kindly help with that?

Use this code

/* Carousel clickable */
.user-items-list-item-container[data-section-id="6419d5af9c0402101905d40b"] {
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;
}}

Hi @tuanphan

So I have gotten the clicking on the carousel images all working however when I put the click and drag code found in here in the footer injection it overrided the original clickable images. 

Sadly I can't give you a link as the page isn't public and I can't give you access either but I can send in the code I've got in both the general custom CSS and the footer injection but it is just a copy paste of yours with the data id updates.

Hope you are well 

Robin

On 10/15/2023 at 10:49 AM, tuanphan said:

Use this code

/* Carousel clickable */
.user-items-list-item-container[data-section-id="6419d5af9c0402101905d40b"] {
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;
}}

 

Thanks @tuanphan, however, this doesn't work properly. Please see the video: https://share.zight.com/4guRl46G

It provides exactly the same result as the one I've tried before - the button is moved to the image and still visible on hover. What I need is to keep the button below the image (how it is working now) and make the image clickable.

On 10/18/2023 at 4:58 PM, Robin710 said:

Hi @tuanphan

So I have gotten the clicking on the carousel images all working however when I put the click and drag code found in here in the footer injection it overrided the original clickable images. 

Sadly I can't give you a link as the page isn't public and I can't give you access either but I can send in the code I've got in both the general custom CSS and the footer injection but it is just a copy paste of yours with the data id updates.

Hope you are well 

Robin

You can follow this guide to share url

On 10/19/2023 at 9:54 PM, gromova_photo said:

Thanks @tuanphan, however, this doesn't work properly. Please see the video: https://share.zight.com/4guRl46G

It provides exactly the same result as the one I've tried before - the button is moved to the image and still visible on hover. What I need is to keep the button below the image (how it is working now) and make the image clickable.

Can you keep code + Share link to page where you use carousel?