Image slideshow fade out/in

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
Highlighted
New Member
1 0 0

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

0 Likes
Highlighted
Astronaut
1117 150 288

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 and accept as 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
Highlighted
New Member
2 0 0

Thanks for your response. 

 

Link to the store: olifshop.de 

 

 

0 Likes
Highlighted
Astronaut
1117 150 288

Looks like you got it working. : )

If my solution helped you, please like and accept as 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