Make slideshow in charge theme loop smoothly

Store Design
, , , ,

Topic summary

A user is experiencing choppy, jerky transitions in the Charge theme’s slideshow feature and wants smooth, continuous sliding animations instead.

Solutions Proposed:

  • Option 1: Modify the theme.liquid file by locating slideshow section code and adjusting CSS transition properties to use ease timing function with increased duration (e.g., transition: transform 0.8s ease)

  • Option 2: Add custom CSS to base.css file targeting .slideshow .flickity-slider with transition: transform 1s ease-in-out !important

Current Status:

Neither solution has worked yet. The user cannot locate a .slideshow class ID in their code, only finding a slider class, and is asking whether these are equivalent. The issue remains unresolved with the user seeking clarification on the correct CSS selector to target.

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

I am using charge theme. The slideshow I am using moves automatically in a choppy movement. i was hoping for a slow sliding loop.

1 Like
2

Hey @Deadly_Dukes ,

Here’s how to fix it for a smooth sliding loop:

  1. Edit your theme.liquid file
  2. Find the slideshow section code (usually has “slideshow” in the class or ID)
  3. Look for the transition/animation settings
  4. Change these values:
.slideshow {
  transition: transform 0.8s ease;
  /* or if using animation property */
  animation: slide 12s infinite ease;
}

The key is changing the timing function to “ease” instead of whatever’s there now, and maybe increasing the duration number. That should make it flow smoothly instead of jerking between slides.

Cheers!
Shubham | Untechnickle

1 Like
3

Hello @Deadly_Dukes

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.slideshow .flickity-slider {
  transition: transform 1s ease-in-out !important;
  will-change: transform;
}
1 Like
4

this did not work for me =[

5

i could not find a class ID for .slideshow, i did find slider though, is this the same?