Changing slideshow effect in debut theme

Solved
Kenrik
Tourist
3 0 1

I am currently using the debut theme and am using "slideshow" for the homepage. I would like the slideshow to slide from image to image continuously (e.g. like if you view photos on instagram and you can slide through photo to photo where it looks like it's stitched together). Is this possible to change the code from a fade to a slide?

Thanks in advance!

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
32497 3263 10835

This is an accepted solution.

@Kenrik 

Thanks for post 

please check attchment 

 fade: true,
to
fade: false,

Debut _ Shopify (2).png

If helpful then please Like and Accept Solution.
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

View solution in original post

Replies 42 (42)
KetanKumar
Shopify Partner
32497 3263 10835

This is an accepted solution.

@Kenrik 

Thanks for post 

please check attchment 

 fade: true,
to
fade: false,

Debut _ Shopify (2).png

If helpful then please Like and Accept Solution.
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
Kenrik
Tourist
3 0 1

Thank you @KetanKumar it works!

miq-cs
Tourist
4 0 1

Hi 

I believe this answer was valid when the Slideshow in the Debut theme was using jQuery. It seems it is built entirely different now and uses native javascript.

When searching for the fade option I only find: 

miq-cs_0-1609699866800.png

That when changed to "slide" it gives an error:

miq-cs_1-1609699892813.png

Could you assess on how to change the effect to sliding images, as opposed to fading ones?

Thank you!

 

KetanKumar
Shopify Partner
32497 3263 10835

@miq-cs 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
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
mgenest
Shopify Partner
14 0 8

Hello,

I would also like an answer to this. Any help would be appreciated!

miq-cs
Tourist
4 0 1

Hi Ketan, thanks for welcoming me to the community

I'm just playing around with the latest version of the Debut theme, so you can download it and see it from the source itself. When searching in theme.js this is what you'll find:

miq-cs_0-1609924388086.png

and as I said, if we change this option to 'slide' the following error appears:

theme.js?v=10501994053312240915:3791 Uncaught (in promise) TypeError: Cannot read property 'style' of null
at Slideshow._setupSlideType (theme.js?v=10501994053312240915:3791)
at Slideshow.<anonymous> (theme.js?v=10501994053312240915:3520)

 

miq-cs_0-1609924880188.png

Just to note that the within the same theme.js the class Quote is using this same configuration as the quotes become a slider when on mobile phone size screen:

miq-cs_1-1609925004682.png

 

 

 

KetanKumar
Shopify Partner
32497 3263 10835

@miq-cs 

Thanks for more details yes, please check this 

https://kenwheeler.github.io/slick/

If helpful then please Like and Accept Solution.
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
to8gal
Tourist
4 0 2

Hi there,

 

as for slick docs I changed Type to empty (type: '') 

and also tried a old answer adding the fade:false, but both did not work

The answer given as solution is to the old Debut yes, can we have a new one?

@KetanKumar Thanks

@miq-cs did u find solution?

KetanKumar
Shopify Partner
32497 3263 10835

@to8gal 

can you please share theme.js file here...

If helpful then please Like and Accept Solution.
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
to8gal
Tourist
4 0 2

Hi there,

 

as for @miq-cs we are talking about the really basic files from the Debut Theme, downloaded yesterday so latest version, I have changed nothing beside what I already told you.

but I can share the bit I have changed from line 3477

{
autoplay: false,
canUseKeyboardArrows: true,
canUseTouchEvents: false,
slideActiveClass: classes.slideActive,
slideInterval: 0,
slidesToShow: 0,
slidesToScroll: 1,
type: '',
fade: false
},

 

jordae
Excursionist
22 0 3

Any update on this ? I've got the latest Debut version and I can't make any feature to work on this new version

KetanKumar
Shopify Partner
32497 3263 10835

@jordae 

can you please share the theme.js file code also can you please check theme customization option may be allow this setting 

If helpful then please Like and Accept Solution.
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
to8gal
Tourist
4 0 2

Again no point in sharing the theme.js, is the basic one of that version, as said was the last a month or so ago.

 

On my side I solved everything implementing bootstrap as a whole and using liquid the slideshow now run on Bs4 Carousel

jordae
Excursionist
22 0 3

Helo Ketan, there's no option for changing the transition effect in debut theme unfortunately, here is my theme.js file, I would also like to display 2 or 3 images at the time, without any space between pictures, is it possible? thanks

theme.js https://file.io/eNZvBxIy3pDS 

KetanKumar
Shopify Partner
32497 3263 10835

@jordae @to8gal 

sorry, i don't know what do you mean?

If helpful then please Like and Accept Solution.
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
jordae
Excursionist
22 0 3

Ok a picture would explain better, that's what I want, with a slide effect and not a fade effect

slideshow.jpg

 

KetanKumar
Shopify Partner
32497 3263 10835

@jordae 

your store url?

If helpful then please Like and Accept Solution.
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
jordae
Excursionist
22 0 3

Hello Ketan, thanks for your help, the url of my shop is https://la-bleue.myshopify.com I messaged you with the password

jordae
Excursionist
22 0 3

Hello Ketan, in your messages you're keep telling me that's possible with custom codes but you never give me the code or anything....