Making A Proper Fade-in And Fade-out For A Slideshow

I've tried to put a slideshow into my HTML using CSS and js. I want to execute two functions simultaneously, namely fading in the new slide and fading out the current slide. I'm k

Solution 1:

In order to make the transitions work, display should be removed. Transitions does not work on display using pure JavaScript. I added a few lines of code setting the opacity and transition time within your for-loops. I also added two .css classes for the div elements and when the div is active and gave those classes positioning and width for the div elements. Also for demo purposes I lowered the time from 10 seconds to 3 seconds. I also took out a lot of unneeded code that pertained to animation. I did not touch the dots code so you would have to figure out what you want to do with that. I tried not to change the code too much per your request. I just deleted what was not needed. Hopefully this helps you at least figure out the transitions problem.

.mySlides{
  position: absolute;
  opacity: 0;
  width: 100%;
}

.mySlides.active{
  position: static;
  opacity: 1;
  width: 100%;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  left: 50%;
  position: static;
}

<div id="slide"> <h1>This is my slideshow.</h1> </div> <br/>
<div class="slideshow-container container" onmouseover="stopSlide()" onmouseleave="resumeSlide()">
  <div class="mySlides">
    <div class="numbertext">1 / 5</div>
    <img src="https://via.placeholder.com/150/0000FF/808080 ?Text=Digital.com" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">2 / 5</div>
    <img src="http://placehold.it/120x120&text=image1" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">3 / 5</div>
    <img src="http://placehold.it/120x120&text=image2" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">4 / 5</div>
    <img src="http://placehold.it/120x120&text=image3" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">5 / 5</div>
    <img src="http://placehold.it/120x120&text=image4" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
</div>


<br>
<div style="text-align:center" >
  <span class="dot" onclick="dotclick()"></span> 
  <span class="dot"></span> 
  <span class="dot"></span>
   <span class="dot"></span> 
  <span class="dot"></span> 
</div>
<script>
var slideIndex = 0;
var timer;

function showSlides() {
  var i;
  { 
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.transition  = "3.0s";
    slides[i].style.opacity = "0";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", " ");
  }
   slides[slideIndex-1].style.transition  = "3.0s";
   slides[slideIndex-1].style.opacity = "1";
 
  dots[slideIndex-1].classList.add("active"); 
  
  timer = setTimeout(showSlides, 3000);
}
} 

function stopSlide(){
 clearTimeout (timer);
}

function resumeSlide(){
    timer = setTimeout(showSlides, 3000);
}


</script>

Solution 2:

Here is the way I do it (no claim of originality, basic idea cowardly stolen). Very clear and elementary, it works for any number of images, no preloading necessary, no jquery, pure JS, no CSS transitions, no classes, and works in older browsers.

In the HTML, you need two img nodes, called img (with opacity 1) and imgbottom (with opacity 0), that you can even append with JS:

var img = document.createElement('img');
img.src = "someimage.jpg";
var imgbottom = document.createElement('img');
img.setAttribute("position", "absolute");
imgbottom.setAttribute("position", "absolute");
imgbottom.style.opacity = 0;
somediv.appendChild(img);
somediv.appendChild(imgbottom);

The nodes must be with position:absolute style in its container to guarantee that the images appear over each other. Then, all the trick is done in the imgbottom.onload method:

var timer;
var fadetime = 500; //miliseconds of transition
imgbottom.onload = function () {                                                                                
  var opac = 0;
  clearInterval(timer);
  timer = setInterval(function() {
    if (opac >= 1) {
      img.src = imgbottom.src;
      img.style.opacity = 1;
      imgbottom.style.opacity = 0;
      img.style.filter = 'alpha(opacity=' + 100 + ')'; // IE fallback
      imgbottom.style.filter = 'alpha(opacity=' + 0 + ')'; // IE fallback
      clearInterval(timer);
    } else {
      img.style.opacity = 1-opac;
      imgbottom.style.opacity = opac;
      img.style.filter = 'alpha(opacity=' + (1-opac)*100 + ')'; // IE fallback
      imgbottom.style.filter = 'alpha(opacity=' + opac*100 + ')'; // IE fallback
      opac += 25.0/fadetime;
    }
  }, fadetime/50);
}

To activate the transition, just load an image into imgbottom:

imgbottom.src = "otherimage.jpg";