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

TrevMey
Tourist
8 0 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?

 

Replies 2 (2)

AliReviews
Shopify Partner
770 89 353

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.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!
SaltyM
Visitor
1 0 0

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 😉  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