What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Automatic slide show gallery mobile

Solved

How to code an automatic mobile slide show gallery?

kindredpeople
Explorer
78 1 23

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

Accepted Solutions (2)
LitExtension
Shopify Partner
4877 1003 1169

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4877 1003 1169

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 13 (13)

KetanKumar
Shopify Partner
37433 3664 12118

@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.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
kindredpeople
Explorer
78 1 23

Thank you very much 🙂 plz find the below

 

kindredpeople.myshopify.com

kiNdr3dppL$

KetanKumar
Shopify Partner
37433 3664 12118

@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  

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

LitExtension
Shopify Partner
4877 1003 1169

Hi @kindredpeople,

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

Screenshot.png

autoplay:!1

=>

autoplay: true,autoplaySpeed: 5000

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
kindredpeople
Explorer
78 1 23

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
Shopify Partner
4877 1003 1169

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
kindredpeople
Explorer
78 1 23

Genius! It worked! The autoplay works. 

By increasing the number above 5000 it gets faster right?

 

LitExtension
Shopify Partner
4877 1003 1169

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
kindredpeople
Explorer
78 1 23

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

lenarei
Explorer
52 3 4

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
Shopify Partner
4877 1003 1169

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
lenarei
Explorer
52 3 4

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
Shopify Partner
2 0 0

Hello @kindredpeople 

 

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