How can I remove the sliding effect from the slideshow?

Store Design
, , , , , , , , , , , , , , ,

Topic summary

A user wants to remove the sliding animation from a slideshow on their Shopify product page, preferring instant image transitions instead.

Solutions Provided:

  • JavaScript approach (recommended): Add a Custom Liquid section with code that sets behavior: "instant" on the slideshow component. This targets only the specific slideshow without affecting global theme files or future updates.

  • CSS approach: Add transition override rules (transition: none !important;) to the theme’s CSS file targeting .slideshow__slide and .slick-slide classes.

Key Technical Note:
The slideshow animation is JavaScript-based, not CSS-based, making the JS solution more accurate. However, both methods were offered.

Outcome:
The issue was resolved—the user confirmed the solution works.

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

Hi, how can I remove that sliding animation from the slideshow when switching to the next image? I just want it to switch instantly without any transition effect.

Here’s my store: https://creationwithtim.com/products/cinematiq-lut-collection-copy
(Just scroll all the way down to find the slideshow section)

Thanks for the help,

Tim

2

Yes, can be done. However, it’s not a CSS transition, so would need to use JS.

Create a “Custom Liquid” section at the bottom of the page and paste this code:

Basically all this is done to add a single line behavior: “instant”.

Note that this may affect other sections which use the same slideshow-component, this is why I did not recommend editing global.js to simply add this line to original code…

(and also I prefer to not use theme code for the sake of update-ability)

1 Like
3

Hi Tim!

To remove the sliding animation from the slideshow and make the images switch instantly without any transition effect, you’ll need to tweak the CSS and JavaScript for the slideshow.

Here’s how you can do it:

Steps to Remove the Slideshow Animation:1. Go to your Shopify admin panel

  1. Click Online Store > Themes

  2. Click Actions > Edit Code

  3. Open Assets/theme.css or Assets/base.css (depending on your theme)

  4. Add this CSS code at the bottom:

.slideshow__slide {
  transition: none !important;
}

.slick-slide {
  transition: none !important;
}

This CSS will remove the sliding transition effect when switching images in the slideshow.

  1. Save your changes, and refresh the page to see the effect.

This will make the slideshow images change instantly without the sliding transition effect.

Let me know if you need any further adjustments!

Accept this as solution if it help out

4

Why this works> Dawn’s slideshow relies on a CSS transition to slide images smoothly. By overriding that transition setting in your Custom CSS, you tell the browser to skip the animation entirely, so each slide appears immediately.

It does not.

5

Thanks! It works