Shopify themes, liquid, logos, and UX
Hi,
My theme Streamline has a testimonials section that is using flickity (at least from what I see from the theme.js file).
I would like to add 5 sec autoplay to this section.
This is the theme: https://senkels.at/#shopify-section-template--14472986591266__164311392971dde964
And this is the JS code snippet that, I think, is responsible for this section:
theme.Testimonials = (function() {
var defaults = {
adaptiveHeight: false,
avoidReflow: true,
pageDots: true,
prevNextButtons: false,
wrapAround: true
};
function Testimonials(container) {
this.container = container;
var sectionId = container.getAttribute('data-section-id')
this.slideshow = container.querySelector('#Testimonials-' + sectionId);
if (!this.slideshow) { return }
theme.initWhenVisible({
element: this.container,
callback: this.init.bind(this),
threshold: 600
});
}
Testimonials.prototype = Object.assign({}, Testimonials.prototype, {
init: function(obj, args) {
// Do not wrap when only a few blocks
if (this.slideshow.dataset.count <= 3) {
defaults.wrapAround = false;
defaults.contain = true;
}
this.flickity = new theme.Slideshow(this.slideshow, defaults);
this.flickity.resize();
},
onUnload: function() {
if (this.flickity && typeof this.flickity.destroy === 'function') {
this.flickity.destroy();
}
},
onDeselect: function() {
if (this.flickity && typeof this.flickity.play === 'function') {
this.flickity.play();
}
},
onBlockSelect: function(evt) {
var slide = this.slideshow.querySelector('.testimonials-slide--' + evt.detail.blockId)
var index = parseInt(slide.dataset.index);
clearTimeout(this.timeout);
if (this.flickity && typeof this.flickity.pause === 'function') {
this.flickity.goToSlide(index);
this.flickity.pause();
}
},
onBlockDeselect: function() {
if (this.flickity && typeof this.flickity.play === 'function') {
this.flickity.play();
}
}
});
return Testimonials;
})();
I would appreciate your help 🙂
Solved! Go to the solution
This is an accepted solution.
Hi @senkels,
Please add code here:
Code:
autoPlay: true,
autoPlay: 5000,
Hope it helps!
This is an accepted solution.
Hi @senkels,
Please add code here:
Code:
autoPlay: true,
autoPlay: 5000,
Hope it helps!
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