How can I add a fade in/fade out effect to my image slideshow on a Narrative theme?

Store Design
1

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

2

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

3

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.

4

Thanks for your response.

Link to the store: olifshop.de

5

Looks like you got it working. : )

6

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

7

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?

8

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!

2 Likes
9

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