Fadeout on slideshow using javascript

Question

As the title states I want to add a fadeout animation once an image in my slideshow swaps only using html, css and javascript. I'm not quiet sure how to do this, but I have some idea. I was thinking I could add an id on the current image, like #fadeout so it gets specific characteristics when fadeing out.

var myIndex = 0;
window.onload = slidePictures();

function slidePictures() {
  var i;
  var slides = document.getElementsByClassName("mySlides");

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    slides[i].setAttribute("id", "fadeout");

  }
  myIndex++;
  if (myIndex > slides.length) {
    myIndex = 1
  }
  slides[myIndex - 1].style.display = "block";
  document.getElementById("indicator").innerHTML = myIndex + "/" + slides.length;

  setTimeout(slidePictures, 3000);

}

.slidesDiv>img {
  width: 80%;
  height: 80%;
  margin-left: 10%;
  opacity: 1;
  transition: opacity 1s;
}

#fadeOut {
  opacity: 0;
}

<div class="slidesDiv">
  <img class="mySlides" src="//placehold.it/200x80/0fb">
  <img class="mySlides" src="//placehold.it/200x80/0bf">
  <img class="mySlides" src="//placehold.it/200x80/fb0">
  <img class="mySlides" src="//placehold.it/200x80/0fb">
  <h1 id="indicator"> Indicator </h1>
</div>

sergdenisov · Accepted Answer · 2017-02-18 12:23:54Z

3

You shouldn't you display property with transition, because it isn't animatable.
I recommend using position: absolute and hiding elements on init.
I think it's better to combine fade in/fade out effects.

Try this example:

var indexes = {current: 0};
var slides = document.getElementsByClassName('mySlides');
window.onload = slidePictures();

function slidePictures() {
    if (indexes.last) {
    	slides[indexes.last].classList.remove('visible');
    }

    slides[indexes.current].classList.add('visible');

    document.getElementById('indicator').innerHTML = (indexes.current + 1) + '/' + slides.length;
    
    indexes.last = indexes.current;
    indexes.current++;
    if (indexes.current >= slides.length) {
        indexes.current = 0;
    }

    setTimeout(slidePictures, 3000);
}

html, body {
    width: 100%;
    height: 100%;
}

.slidesDiv {
    width: 80%;
    height: 80%;
    margin-left: 10%;
    position: relative;
}

.mySlides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 1s;
}

.visible {
    opacity: 1;
}

<div class="slidesDiv">
    <img class="mySlides" src="//placehold.it/200x80/0fb">
    <img class="mySlides" src="//placehold.it/200x80/0bf">
    <img class="mySlides" src="//placehold.it/200x80/fb0">
    <img class="mySlides" src="//placehold.it/200x80/bbb">
</div>
<h1 id="indicator">1/4</h1>

JSFiddle

edited Feb 18, 2017 at 12:23

answered Feb 18, 2017 at 11:58

sergdenisov

8,6129 gold badges52 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Amar Over a year ago

this worked. But it doesn't feel like the slideshow is inside the div? As in it can go outside of the div box? As in im trying to make a responsive website but the image just goes ontop of things because of the position: absolute

sergdenisov Over a year ago

@Amar why? No, the slideshow is inside the div. What's your problem?

Amar Over a year ago

The positioning of the slideshow just feels off, when I minimize my website it just goes ontop of other things it shouldn't be able to

sergdenisov Over a year ago

@Amar I don't see this problem in my snippet, it seems like the problem is in your site's code. Could you create the code snippet with the problem?

Amar Over a year ago

I mean as in this, ive got the borderbox around the div, But the width, height, margin etc of the slideshow doesn't adjust for the div instead it takes the whole screen if that makes sense. i.gyazo.com/7a6f08e9cd8982493978fceccca8a89c.png

|

halfer · Accepted Answer · 2017-12-07 19:14:22Z

1

I recommend using style attributes only. If you want to use CSS for applying a new style a new CSS class may be better. Then you could use slide.className += 'fadeOut'; .

Now the code for fading images:

function fadeIn(element) { element.style['display'] = '';
    element.style['opacity'] = 1; }

function fadeOut(element) {
    element.style['opacity'] = 0;
    setTimeout(function() { element.style['display'] = 'none'; }, YOUR_ANIMATION_DURATION_IN_MILLISECONDS);
}

function fadeBetween(from, to) {
    fadeIn(from);
    fadeOut(to);
}

That's the easiest I use to do it. Of course you could modify it to use CSS classes instead of style attributes. It should be easy to create a loop and cycle through all images which should be faded in our out.

edited Dec 7, 2017 at 19:14

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Feb 18, 2017 at 10:41

fameman

3,9992 gold badges22 silver badges37 bronze badges

8 Comments

fameman Over a year ago

Welcome to WebDevelopment. It depends on what you would like to do. Would you like to create an infinite slideshow starting on pageload?

fameman Over a year ago

In the for loop you should replace the current code with fadeOut(); and the ...style['display'] = 'block'; ... should be replaced with fadeIn()

fameman Over a year ago

That should be all.

Amar Over a year ago

What exatly should be in each of the parameters? ´fadeOut(slides[i]);´ ´fadeIn(slides[myIndex-1]);´ ?

Amar Over a year ago

Your code doesn't work for me, it doesn't give a fading effect.

|

Collectives™ on Stack Overflow

Fadeout on slideshow using javascript

2 Answers 2

7 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related