Shopify themes, liquid, logos, and UX
Hi there,
we're new in the shopify community and setting up our new online shop (narrative theme). On our landingpage we added a slideshow with four images. That's the code we added:
var sections = window.theme.sections; var slideshowAutoExtension = { init: function() { this.on('slideshow_desktop_init_done', this._autoplaySlideshow.bind(this)); }, _autoplaySlideshow: setInterval(function() { var $slide = $('.slideshow__slide--active') .removeClass('slideshow__slide--active'); var $button = $('.slideshow__button--active') .removeClass('slideshow__button--active'); var $slides = $('.slideshow__slide'); var currentIndex = ($slides.index($slide) + 1) % $slides.length; $slides .eq(currentIndex) .addClass('slideshow__slide--active'); var $buttons = $('.slideshow__button') .eq(currentIndex) .addClass('slideshow__button--active'); }, 5000) }; sections.extend('slideshow', slideshowAutoExtension);
The changing of the slides (images) isn't stylish so we're trying to change it. A slow fade in/fade out of the images and the heading would be perfect.
Is there a chance to add some code for fade in/fade out?
Thanks in advance!
Yannik
Hey guys, i have the same problem anyone can help?
Should be able to achieve this with some css. You can add a transition to your initial slideshow class for opacity, set it to 0, and then give the slideshow active class an opacity of one. Try adding this into your css file:
.slideshow__slide{ opacity: 0; transition: opacity .2s ease; } .slideshow__slide.slideshow__slide--active { opacity: 1; }
If you can post a link to your store though I could check and be sure this would work. Please post a password if password protected.
Thanks for your response.
Link to the store: olifshop.de
Looks like you got it working. : )
Hi
Im using Retina
ive selected slideshow animation > fade
but the slides keep sliding!
how can i force it to take the instruction?
best
Patrick
I'm also trying to accomplish this. I want to change the slide animation to a zoom fade. Which file do I add the .css to?
I'm trying to change my slideshow in the Dawn theme from a side-to-side sliding transition to a fading transition. Suggestions I've found refer to a file I am not seeing in my theme's files. I'm guessing the file structure may have changed with the intro of 2.0...
Anybody know where and how I can accomplish this in 2022? Thanks!
Did you get any answer? I'm in the same boat
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024