Image slideshow fade out/in

YannikM
New Member
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 

0 Likes
DougOo
New Member
1 0 0

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

0 Likes
Ninthony
Shopify Partner
1975 296 784

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 :D
0 Likes
YannikM
New Member
2 0 0

Thanks for your response. 

 

Link to the store: olifshop.de 

 

 

0 Likes
Ninthony
Shopify Partner
1975 296 784

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 :D
0 Likes
Pat_Troy1
Excursionist
12 0 9

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

0 Likes
itswhizz
New Member
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?

0 Likes