How to switch Craft slideshow to a fade transition?

Technical Q&A
,

Topic summary

A user asks how to implement a fade transition for a Craft theme slideshow on Shopify.

Primary Solution:

  • Add CSS code to component-slideshow.css that disables scroll-snap behavior and applies a fadeIn keyframe animation (5-second duration) to visible slides
  • The CSS targets slideshow-component .slideshow.banner elements

Alternative Approach:

  • Another contributor suggests adding code to a custom liquid section (includes a reference image showing implementation)

Follow-up Question:

  • A subsequent user asks whether the fade can be modified to a crossfade effect with the initial slide starting at full opacity

Status: The original question has received working solutions, but the crossfade variation remains unanswered.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

How can I change my Craft slideshow to a fade transition?

2

Hi @rwilleby ,

Go to Assets > component-slideshow.css and paste this at the bottom of the file:

slideshow-component .slideshow.banner{
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
slideshow-component .slideshow.banner [aria-hidden="false"] {
  animation: fadeIn 5s;
}

Hope it helps!

1 Like
3

Hello @rwilleby

I would like to give you some recommendations to support you.

You can add this code to a custom liquid section

Like image

GemPages_Agents_0-1668400543855.png
GemPages_Agents_0-1668400543855.png1901×964 289 KB

Hope my recommendation can works and support for you!

Kind & Best regards!

GemPages

4

Is it possible to make this a cross fade with the initial slide starting at 100% opacity?