First Slide Not Clickable for a Few Seconds in Slideshow

[BrantFowler]

I found some code on here a while back to add a fading transition for a slideshow. It worked great, but it has caused the first slide to not be clickable for the 3 seconds of fade-in.

I can't figure out how to disable the fade-in for just that first slide or any other solution.

This is the code I inserted into component-slideshow.css:

slideshow-component .slideshow.banner{
scroll-snap-type: none !important;
scroll-behavior: auto !important;
}

@keyframes fadeIn {
0% { opacity: 0.5; }
100% { opacity: 1; }
}

@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0.5; }
}

slideshow-component .slideshow.banner [aria-hidden="false"] {
animation: fadeIn 200ms, fadeOut 300ms 2700ms;

I have the interval set to 3 seconds, which matches the fadeOut as suggested.

I'm using the Trade theme.

Website: https://lifelinecomics.com/

Any help would be great. Let me know what other details I need to provide.

Thanks!

[zafarkhan987]

Try disabling the fade-in animation for the first slide using :first-child or nth-child(1). Example:

slideshow-component .slideshow.banner [aria-hidden="false"]:first-child {
  animation: none;
}

This should make the first slide appear instantly while keeping transitions for the rest. Let me know if you need more tweaks!

[BrantFowler]

Thanks for the timely response and assistance! It did remove it from the slide and made it clickable right away. But... it removed the fade completely from all slides to. Now it just jumps right to the next one.