Can you add fade in/out effects to a Shopify slideshow?

YannikM
Visitor
2 0 0

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 

Replies 8 (8)

DougOo
Visitor
1 0 0

Hey guys, i have the same problem anyone can help?

Ninthony
Shopify Partner
2329 350 1023

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.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
YannikM
Visitor
2 0 0

Thanks for your response. 

 

Link to the store: olifshop.de 

 

 

Ninthony
Shopify Partner
2329 350 1023

Looks like you got it working. : )

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Pat_Troy1
Excursionist
18 0 12

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

itswhizz
Visitor
1 0 0

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?

FreeAssociates
Tourist
4 0 5

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!

suryawanshiuday
Tourist
6 0 1

Did you get any answer? I'm in the same boat