Shopify themes, liquid, logos, and UX
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?
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.
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
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025