Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Does anyone know how to code a gallery mobile slide show to move to the next image automatically (say example after 5 seconds?).
I am using the theme Showcase.
Thanks!
G
Solved! Go to the solution
This is an accepted solution.
Hi @kindredpeople,
Please change 'speed:5000' => 'autoplaySpeed: 5000'
You can refer to the instructions for options here: https://kenwheeler.github.io/slick/
Hope it helps!
This is an accepted solution.
Hi @kindredpeople,
It will be the slider transition time, so as it increases, the speed will slow down.
So for example when you increase to 10000, the slider switching speed will be 10s.
Hope it is clear to you.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Thank you very much 🙂 plz find the below
kindredpeople.myshopify.com
kiNdr3dppL$
great thanks i have to check your theme to allow Swiper Slider
If you're comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try to follow the custom coding provided by
Slider Demo or Send DM Customization details
Hi @kindredpeople,
Please go to theme.js file, find 'autoplay:!1' and change code:
autoplay:!1
=>
autoplay: true,autoplaySpeed: 5000
Hope it helps!
Hi LitExtension,
I found the code but I think I am doing something wrong -
// - init carousel
$carouselGallery.on('init', function () {
$('.lazyload--manual', this).removeClass('lazyload--manual').addClass('lazyload');
}).slick({
autoplay: true,
fade: false,
speed:5000,
infinite: true,
useTransform: true,
arrows: false,
dots: true,
cssEase: 'cubic-bezier(0.25, 1, 0.5, 1)',
customPaging: function customPaging(slider, i) {
return "<button class=\"custom-dot\" type=\"button\" data-role=\"none\" role=\"button\" tabindex=\"0\">" + "<svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" width=\"30px\" height=\"30px\" viewBox=\"0 0 30 30\" xml:space=\"preserve\">" + "<circle class=\"circle-one\" cx=\"15\" cy=\"15\" r=\"13\" />" + "<circle class=\"circle-two\" cx=\"15\" cy=\"15\" r=\"13\" />" + "</svg>" + "</button>";
This is an accepted solution.
Hi @kindredpeople,
Please change 'speed:5000' => 'autoplaySpeed: 5000'
You can refer to the instructions for options here: https://kenwheeler.github.io/slick/
Hope it helps!
Genius! It worked! The autoplay works.
By increasing the number above 5000 it gets faster right?
This is an accepted solution.
Hi @kindredpeople,
It will be the slider transition time, so as it increases, the speed will slow down.
So for example when you increase to 10000, the slider switching speed will be 10s.
Hope it is clear to you.
Perfect it all worked thanks so much!! very good😀
Thanks so much for this question & answer! Based on this solution, I am wondering how to make the autoplay function a selectable option. I tried to manipulate the code as follows, but haven't been able to make it work :
in gallery.liquid I added:
{% if section.settings.enable_carousel %} gallery--mobile-carousel slick-slider-overlay-dots data-autoplay="{{ section.settings.autoplay }}" data-autoplay-speed="{{ section.settings.autoplay_speed }}"{% endif %}
and in schema:
{
"id": "autoplay",
"type": "checkbox",
"label": "Auto-rotate slides",
"default": false
},
{
"type": "range",
"id": "autoplay_speed",
"min": 1,
"max": 20,
"step": 1,
"unit": "s",
"label": "Change slides every",
"default": 7
}
Then I added the following in theme.js:
$carouselGallery.on('init', function () {
$('.lazyload--manual', this).removeClass('lazyload--manual').addClass('lazyload');
}).slick({
autoplay: $(this).data('autoplay'),
fade: false,
speed: 600,
autoplaySpeed: autoplaySpeed,
infinite: true, ...
Which part am I missing? 🤔
Hi @lenarei,
You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.
Thanks for the nudge. I created a new question and tagged you in it 🙂
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024