how to make slideshow clickable crave theme

[earthtreasures]

I'm trying to make my images in slideshow clickable instead of using buttons, can someone help please.

[AvadaCommerce · Accepted solution]

HI @earthtreasures ,

Sorry, maybe you don't understand what I mean. You should not hide the button text on the editor. So that I can get the link from that button to css into the link for the image. You just show the button on the editor, then use my code, the button will hide itself and I can also get the link from that button.

please show the button again then use the below css to hide the button:

.banner__buttons a {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: transparent;
    z-index: 2;
    opacity: 0 !important;   
}

.slideshow__text.banner__box {
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 100%;
    left: 0;
    top: 0;
}

.banner__buttons a:before,
.banner__buttons a:after,
.banner__buttons:before, 
.banner__buttons:after {
    display: none !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Thanks you

[AvadaCommerce]

Hi @earthtreasures ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

[earthtreasures]

still under constructions

the store url is 

earthtreasuresusa.shopify.com

password is glahze

[AvadaCommerce]

HI @earthtreasures ,

Your password page does not have a password entry location. So I can't check this issue for you.

[earthtreasures]

I removed the password, please try again 

[AvadaCommerce]

Hi @earthtreasures ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

.banner__buttons a {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: transparent;
    z-index: 2;
}

.slideshow__text.banner__box {
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 100%;
    left: 0;
    top: 0;
}

.banner__buttons a:before,
.banner__buttons a:after {
    display: none;
}
.banner__buttons:before,
.banner__buttons:after {
    position: absolute;
    content: "";
    width: 170px;
    height: 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 25px;
    z-index: 2;
}
.banner__buttons:after {
    z-index: 1;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% - 4px));
    background: transparent;
    box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow),var(--shadow-opacity));
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[earthtreasures]

partially worked, but I would like to remove the Button and still be able to click on slideshow images with each has it is own link.

[AvadaCommerce]

Hi @earthtreasures ,

If you want remove button, you can try replace below code:

.banner__buttons a {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: transparent;
    z-index: 2;
    opacity: 0
        
}

.slideshow__text.banner__box {
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 100%;
    left: 0;
    top: 0;
}

.banner__buttons a:before,
.banner__buttons a:after {
    display: none;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[earthtreasures]

still it removed the button and the image is not clickable anymore.  Trying to make the image clickable without having the button shown.  Thank you

[AvadaCommerce · Accepted solution]

HI @earthtreasures ,

Sorry, maybe you don't understand what I mean. You should not hide the button text on the editor. So that I can get the link from that button to css into the link for the image. You just show the button on the editor, then use my code, the button will hide itself and I can also get the link from that button.

please show the button again then use the below css to hide the button:

.banner__buttons a {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: transparent;
    z-index: 2;
    opacity: 0 !important;   
}

.slideshow__text.banner__box {
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 100%;
    left: 0;
    top: 0;
}

.banner__buttons a:before,
.banner__buttons a:after,
.banner__buttons:before, 
.banner__buttons:after {
    display: none !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Thanks you

[earthtreasures]

Thank you very much, it worked. you are a life saver

[earthtreasures]

sorry one more thing, the clickable image is not clickable when I use mobile device 

[AvadaCommerce · Accepted solution]

Hi @earthtreasures ,

You try add below code: 

@media (max-width: 749px) {
.banner__content {
    position: absolute !important;
    opacity: 0;
    height: 100%;
    left: 0;
    right: 0;
}
}

Hope it can help you

[earthtreasures]

Very Nice I really appreciate the help.

[earthtreasures]

This is still not working, when I go to my website either desktop or mobile I get the following text at the bottom of my slideshow.

".banner__buttons a { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: transparent; z-index: 2; } .slideshow__text.banner__box { position: absolute; height: 100%; width: 100%; max-width: 100%; left: 0; top: 0; } .banner__buttons a:before, .banner__buttons a:after { display: none; } .banner__buttons:before, .banner__buttons:after { position: absolute; content: ""; width: 170px; height: 50px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 25px; z-index: 2; } .banner__buttons:after { z-index: 1; content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 4px)); background: transparent; box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow),var(--shadow-opacity)); }"

can you please help

[AvadaCommerce]

Hi @earthtreasures ,

This part I have answered you through 1 of your other post. Please check your slideshow file again. Because the code shown is some css code added in the slideshow file, but not in the <style></style> tag pair.

Or you can remove that code. Because I only guide you to copy in the base.css file, not in the slideshow file.

Hope it can help you. If you still can't fix it, you can contact me again, I'll be happy to help you

Thanks you.

[peedeesolo]

Hello the clickable region on mobile is perfect. The clickable area for desktop in only on the left side of the image. Can you please help?

[suren91]

It worked like a charm, thank youuuuuu

[Seasons]

Hi! I see that you have a clickable slideshow on your webpage. Did you use the crave theme? What code did you use, if you don't mind me asking? Thanks. 😊