Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
This is an accepted solution.
Thanks for post
please check attchment
fade: true, to fade: false,
This is an accepted solution.
Thanks for post
please check attchment
fade: true, to fade: false,
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!
Welcome to the Shopify community!
and Thanks for your question.
Please share your site URL,
So I will check and provide a solution here.
Hello,
I would also like an answer to this. Any help would be appreciated!
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:
Thanks for more details yes, please check this
https://kenwheeler.github.io/slick/
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?
can you please share theme.js file here...
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
},
Any update on this ? I've got the latest Debut version and I can't make any feature to work on this new version
can you please share the theme.js file code also can you please check theme customization option may be allow this setting
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
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
sorry, i don't know what do you mean?
Ok a picture would explain better, that's what I want, with a slide effect and not a fade effect
your store url?
Hello Ketan, thanks for your help, the url of my shop is https://la-bleue.myshopify.com I messaged you with the password
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....
User | RANK |
---|---|
123 | |
98 | |
77 | |
69 | |
38 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022