Shopify themes, liquid, logos, and UX
Join us March 21 for an AMA on planning your 2023 marketing budget with 2H Media co-owners, Matt and Aron
Hi there.
In a Narrative theme, the slideshow loops in about 7 seconds rate, but I need it to loop in 1 second rate. How do we make it work? Thank you.
Solved! Go to the solution
This is an accepted solution.
var sections = window.theme.sections;
var slideshowAutoExtension = {
init: function() {
this.on('slideshow_desktop_init_done', this._autoplaySlideshow.bind(this));
},
_autoplaySlideshow: setInterval(function() {
var $slide = $('.slideshow__slide--active')
.removeClass('slideshow__slide--active');
var $button = $('.slideshow__button--active')
.removeClass('slideshow__button--active');
var $slides = $('.slideshow__slide');
var currentIndex = ($slides.index($slide) + 1) % $slides.length;
$slides
.eq(currentIndex)
.addClass('slideshow__slide--active');
var $buttons = $('.slideshow__button')
.eq(currentIndex)
.addClass('slideshow__button--active');
}, 1000)
};
sections.extend('slideshow', slideshowAutoExtension);
sorry for that issue
can you please check theme setting may ne allow this option if doesn't so please share your theme.js file so i will check and update
This is an accepted solution.
var sections = window.theme.sections;
var slideshowAutoExtension = {
init: function() {
this.on('slideshow_desktop_init_done', this._autoplaySlideshow.bind(this));
},
_autoplaySlideshow: setInterval(function() {
var $slide = $('.slideshow__slide--active')
.removeClass('slideshow__slide--active');
var $button = $('.slideshow__button--active')
.removeClass('slideshow__button--active');
var $slides = $('.slideshow__slide');
var currentIndex = ($slides.index($slide) + 1) % $slides.length;
$slides
.eq(currentIndex)
.addClass('slideshow__slide--active');
var $buttons = $('.slideshow__button')
.eq(currentIndex)
.addClass('slideshow__button--active');
}, 1000)
};
sections.extend('slideshow', slideshowAutoExtension);
If helpful then please Like Solution
Thank you dmwwebartisan it works perfectly.
Now there is another issue - the transition between slides. Every time it transit, it flashes a white screen and it feels annoying. Can it transit with a nice fade in 200 milliseconds, without a white screen between?
Thank you.
Please remove previous js script and add this script
var sections = window.theme.sections;
var slideshowAutoExtension = {
init: function() {
this.on('slideshow_desktop_init_done', this._autoplaySlideshow.bind(this));
},
_autoplaySlideshow: setInterval(function() {
var $slide = $('.slideshow__slide--active')
.removeClass('slideshow__slide--active');
var $button = $('.slideshow__button--active')
.removeClass('slideshow__button--active');
var $slides = $('.slideshow__slide');
var currentIndex = ($slides.index($slide) + 1) % $slides.length;
$slides
.eq(currentIndex)
.addClass('slideshow__slide--active');
var $buttons = $('.slideshow__button')
.eq(currentIndex)
.addClass('slideshow__button--active');
}, 200)
};
sections.extend('slideshow', slideshowAutoExtension);
Sorry, i didn't explain the problem very well. The speed of the loop 1000 (1 second) is perfect. But between the transition of the slides, it flashes the white light. It goes like this:
1. SlideA - (1second)
2. Transition - it flashes white color for about 200 (0.2 seconds)
3. SlideB - (1second)
Step "2" is the problem because it flashes the white color between slides and it feels annoying.
User | RANK |
---|---|
178 | |
157 | |
90 | |
33 | |
29 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023