Make images clickable in the carousel

Hi, 

I also need some help to get the carousel images to be click-through links. (in our services)

The page  is: https://www.downunderoasis.com
pw: venecos2024

Thanks so much!

On 2/22/2024 at 4:26 PM, Jordanlara said:

 

Hi, 

I also need some help to get the carousel images to be click-through links. (in our services)

The page  is: https://www.downunderoasis.com
pw: venecos2024

Thanks so much!

I see it already works to me.

Hi there, I would like to make the images of company logos in a carousel, be clickable to go to another page (for example their website). I have used the code on this page and managed to make the images clickable, however, due to some other code we have that highlights buttons green, it looks like this:

is there a way around this?

https://www.foundermade.com/d2c-executive-summit-march-2024

On 2/26/2024 at 3:53 AM, MarketingFounderMade said:

Hi there, I would like to make the images of company logos in a carousel, be clickable to go to another page (for example their website). I have used the code on this page and managed to make the images clickable, however, due to some other code we have that highlights buttons green, it looks like this:

is there a way around this?

https://www.foundermade.com/d2c-executive-summit-march-2024

Do you still need help? If yes, you can enable button then use this CSS code

section[data-section-id="65283cfbdf71d07f2e83f909"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .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;
}
.list-item-content--hidden {
    display: block !important;
}}

On 2/29/2024 at 8:07 AM, tuanphan said:

Do you still need help? If yes, you can enable button then use this CSS code

section[data-section-id="65283cfbdf71d07f2e83f909"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .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;
}
.list-item-content--hidden {
    display: block !important;
}}

 

Hi- yes I do still need help!

Thank you for the code, unfortunately still getting the green overlay - see pic!

On 3/6/2024 at 7:09 AM, MarketingFounderMade said:

Hi- yes I do still need help!

Thank you for the code, unfortunately still getting the green overlay - see pic!

Can you add & keep code in CSS box? I Can check it again easier

Hi, 

I also need some help to get the carousel images to be click-through links. (in our services)

The page  is: https://www.jennydavisart.com/

Thank you!

On 3/30/2024 at 10:01 AM, Genivieve said:

Hi, 

I also need some help to get the carousel images to be click-through links. (in our services)

The page  is: https://www.jennydavisart.com/

Thank you!

First, enable Item buttons, add url on each button, then use this code to Website > Website Tools > Custom CSS

section[data-section-id="65bb3f171281244d060cf537"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .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;
}
.list-item-content--hidden {
    display: block !important;
}}

Thank you I will try it. 

Hello,

I'd also love some help with a carousel on my page: https://triceratops-magnolia-6ajn.squarespace.com/
It's under the "Our Sponsors" section of the Home page. I've already added the buttons and I'd love to hide the buttons and instead have the images clickable. If there's an option to have the carousel Auto-Scroll, that would be amazing!

Also, I would like to make the images on our Sponsors Page clickable: https://triceratops-magnolia-6ajn.squarespace.com/sponsors/
Buttons are added already. 

On 4/12/2024 at 11:07 PM, corneliasteger said:

Hello,

I'd also love some help with a carousel on my page: https://triceratops-magnolia-6ajn.squarespace.com/
It's under the "Our Sponsors" section of the Home page. I've already added the buttons and I'd love to hide the buttons and instead have the images clickable. If there's an option to have the carousel Auto-Scroll, that would be amazing!

Also, I would like to make the images on our Sponsors Page clickable: https://triceratops-magnolia-6ajn.squarespace.com/sponsors/
Buttons are added already. 

You can use this code to Website > Website Tools > Custom CSS

section[data-section-id="65f469eafbfb4d0db67db898"], section[data-section-id="65f79f4d88e4c0527d61aa41"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .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;
}
.list-item-content--hidden {
    display: block !important;
}}

7 hours ago, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

section[data-section-id="65f469eafbfb4d0db67db898"], section[data-section-id="65f79f4d88e4c0527d61aa41"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .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;
}
.list-item-content--hidden {
    display: block !important;
}}

 

Hello, 

thanks so much for providing the code! It worked on the Home page, but it doesn't seem to work on the "our Sponsors" page:  https://triceratops-magnolia-6ajn.squarespace.com/sponsors/

The buttons are unfortunately still there. Is there a solution for this section too? 

On 4/16/2024 at 9:46 PM, corneliasteger said:

Hello, 

thanks so much for providing the code! It worked on the Home page, but it doesn't seem to work on the "our Sponsors" page:  https://triceratops-magnolia-6ajn.squarespace.com/sponsors/

The buttons are unfortunately still there. Is there a solution for this section too? 

Use this code for Our Sponsors Page

[data-section-id="65f79f4d88e4c0527d61aa41"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.list-item-content__button-container a {
    position: absolute !important;
    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;
}
.list-item-content--hidden {
    display: block !important;
}}

Hello there,

I'm having the same issue. Trying to make my carousel images clickable. Could you possibly help? TIA!

On 4/21/2024 at 1:45 AM, MHopkins3026 said:

Hello there,

 

I'm having the same issue. Trying to make my carousel images clickable. Could you possibly help? TIA!

Can you share link to page where you use Carousel?

Hello!

I am also having trouble adding links to a simple list. If you could send me a code, I would greatly appreciate it! Here is my website:

suncitymusicalarts.org/board-members

I'm having trouble adding clickthrough links to the carousel on my homepage. My website is elijahmpritchett.com. Could I copy the code from others in this thread or do I need my own (i am not experienced in coding).

On 5/22/2024 at 1:02 AM, celestialco said:

Hello!

I am also having trouble adding links to a simple list. If you could send me a code, I would greatly appreciate it! Here is my website:

suncitymusicalarts.org/board-members

You can use this code

section[data-section-id="664ccd8104ccd813bfeab279"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.list-item-content__button-container a {
    position: absolute !important;
    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;
}
.list-item-content--hidden {
    display: block !important;
}}

23 hours ago, Eli4860 said:

I'm having trouble adding clickthrough links to the carousel on my homepage. My website is elijahmpritchett.com. Could I copy the code from others in this thread or do I need my own (i am not experienced in coding).

Use this code

body.homepage {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .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;
}
.list-item-content--hidden {
    display: block !important;
}}

Thank you so much!!!

Hello,

I'd also love some help with a carousel on my page: https://www.plando.dk/

I would like the images to be clickable instead of having buttons with links.

It's under the testimonial section, called "Det siger vores kunder og samarbejdspartnere" on the home page. Buttons are added already. Will this also work if I add more testimonial items in the section in the future?

It would be great if you could help.

Thank you in advance!

On 6/10/2024 at 7:46 PM, mvspjp said:

Hello,

I'd also love some help with a carousel on my page: https://www.plando.dk/

I would like the images to be clickable instead of having buttons with links.

It's under the testimonial section, called "Det siger vores kunder og samarbejdspartnere" on the home page. Buttons are added already. Will this also work if I add more testimonial items in the section in the future?

It would be great if you could help.

Thank you in advance!

You can use this code to Website > Website Tools > Custom CSS. It will work if you remove/add new testimonial items. But if you remove current testimonial section and add new one, you will need new code

section[data-section-id="6666dbf8d061bb4be364dc4e"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .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;
}
.list-item-content--hidden {
    display: block !important;
}}

On 5/23/2024 at 4:57 AM, tuanphan said:

section[data-section-id="664ccd8104ccd813bfeab279"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.list-item-content__button-container a {
    position: absolute !important;
    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;
}
.list-item-content--hidden {
    display: block !important;
}}

Thank you so much! Is there a way to embed a pop-up window owhen they click on each board member to read their bio, instead of having to visit a different page each time?

On 7/6/2024 at 7:31 AM, celestialco said:

Thank you so much! Is there a way to embed a pop-up window owhen they click on each board member to read their bio, instead of having to visit a different page each time?

You will need to use Popup Plugin (referral link) to achieve this.

But you can also consider this approach, click on each button >> show corresponding section under (custom code will hide all sections initial)

Hey @tuanphan as you appear to be the coding wizard we do not deserve but the wizard we all need, any chance you could spare some magic for my Carousel as well, please?

I'm fairly new to all this coding & web design but here is the link.

https://www.theritesolution.co.uk/

On 8/9/2024 at 9:00 PM, AaronTRS said:

Hey @tuanphan as you appear to be the coding wizard we do not deserve but the wizard we all need, any chance you could spare some magic for my Carousel as well, please?

I'm fairly new to all this coding & web design but here is the link.

https://www.theritesolution.co.uk/

Hi,

You mean top banner slideshow? Use this code to Custom CSS box

section[data-section-id="63cbc21466967f39df5e7f6e"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .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;
}
.list-item-content--hidden {
    display: block !important;
}
.user-items-list-banner-slideshow, .user-items-list-banner-slideshow .slide-content {
    position: static !important;
}}