Changing slideshow effect in debut theme

[Kenrik]

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!

[KetanKumar · Accepted solution]

@Kenrik 

Thanks for post 

please check attchment 

 fade: true,
to
fade: false,

[Kenrik]

Thank you @KetanKumar it works!

[miq-cs]

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: 

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

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

Thank you!

[KetanKumar]

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

[mgenest]

Hello,

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

[miq-cs]

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:

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)

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:

[KetanKumar]

@miq-cs 

Thanks for more details yes, please check this 

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

[to8gal]

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]

@to8gal 

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

[to8gal]

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]

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]

@jordae 

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

[to8gal]

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]

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]

@jordae @to8gal 

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

[jordae]

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

[KetanKumar]

@jordae 

your store url?

[jordae]

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

[jordae]

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