How to code an automatic mobile slide show gallery?

[kindredpeople]

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

[LitExtension · 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!

[KetanKumar]

@kindredpeople 

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.

[kindredpeople]

Thank you very much 🙂 plz find the below

kindredpeople.myshopify.com

kiNdr3dppL$

[KetanKumar]

@kindredpeople 

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  

[LitExtension]

Hi @kindredpeople,

Please go to theme.js file, find 'autoplay:!1' and change code:

autoplay:!1

=>

autoplay: true,autoplaySpeed: 5000

Hope it helps!

[kindredpeople]

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>";

[LitExtension · 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!

[kindredpeople]

Genius! It worked! The autoplay works. 

By increasing the number above 5000 it gets faster right?

[LitExtension · 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.

[kindredpeople]

Perfect it all worked thanks so much!! very good😀

[lenarei]

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? 🤔

[LitExtension]

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.

[lenarei]

Thanks for the nudge. I created a new question and tagged you in it 🙂

https://community.shopify.com/c/technical-q-a/slide-show-mobile-gallery-make-automatic-rotation-opti...

[Rahulsinh]

Hello @kindredpeople 

I have used the same code but still not working can you help me?