How can I remove the sliding effect from the slideshow?

[CreatorTim]

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

[tim · Accepted solution]

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:

<script>
document.addEventListener('DOMContentLoaded', ()=> {
customElements.get('slideshow-component').prototype.setSlidePosition = function(position) {
    this.setPositionTimeout && clearTimeout(this.setPositionTimeout),
    this.setPositionTimeout = setTimeout( () => {
      this.slider.scrollTo({
        left: position,
        behavior: "instant" 
      })
    }
    , this.announcerBarAnimationDelay)
  }
})
</script>

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)

[CreatorTim]

Thanks! It works

[tim]

---

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.

[Rashman-tech]

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

2. Click Online Store > Themes

3. Click Actions > Edit Code

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

5. 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