Studio theme slide show skips back through the images back to the first

Store Design
1

The studio theme slideshow, starts and goes through the image as it should, when reaching the final images, it moves quickly though the last images back to one, it doesn’t look professional.

How can the slider to rotate smoothly from last image to first image without skipping through the previous image? How would I need to update the code?

2

Hello @TrevMey ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to slideshow.js or carousel.js

Modify the code to ensure a smooth transition from the last image to the first image without skipping through the previous image. Here’s an example modification:

// Find the code responsible for transitioning from last image to first image
if (currentSlide === totalSlides) {
  // Add the following lines to ensure smooth transition
  setTimeout(function() {
    carousel.style.transition = 'none';
    carousel.style.transform = 'translateX(0)';
    setTimeout(function() {
      carousel.style.transition = 'all 0.5s ease';
      carousel.style.transform = 'translateX(-100%)';
    }, 10);
  }, slideDuration);
  currentSlide = 1;
} else {
  // Existing code for transitioning to the next slide
  // ...
}

Save changes

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

3

I tried to go use this code but could not find where to put it. Couldn’t find slideshow.js nor carousel.js anywhere … found slideshow.liquid in “Sections” and component.slideshow.css in “Assets” … but neither had anything about “(currentSlide === totalSlides)” … or anything else. HELP :wink: No idea why the theme would be built to swipe in the opposite direction at the ‘end’ of the show instead of continuing / looping around to the beginning. It’s pretty bad looking. Appreciate any help … thanks