Smooth transition between each images

Question

I have this slideshow on my project, but when changing between images it seems like very abrupt. In other words, I want it to change smoothly between them.

<div>
  <img class="mySlides" src="assets/img/big_logo_1.svg" max-width="100%">
  <img class="mySlides" src="assets/img/big_logo_2.svg" max-width="100%">
  <img class="mySlides" src="assets/img/big_logo_3.svg" max-width="100%">
</div>

.mySlides {display:none; max-width: 100%;}

var myIndex = 0;
          carousel();

          function carousel() {
            var i;
            var x = document.getElementsByClassName("mySlides");
            for (i = 0; i < x.length; i++) {
              x[i].style.display = "none";  
            }
            myIndex++;
            if (myIndex > x.length) {myIndex = 1}    
            x[myIndex-1].style.display = "block";  
            setTimeout(carousel, 3000); // Change image every 3 seconds
          }

Answer 1

Using css transition and images positioned in an absolute way, you can achieve it in a few tweaks of your code:

<div class="carousel">
  <img class="mySlides" src="https://source.unsplash.com/random">
  <img class="mySlides" src="https://source.unsplash.com/random/?cat">
  <img class="mySlides" src="https://source.unsplash.com/random/?dog">
</div>

.carousel{
  max-width: 100%;
  position: relative;
  height: auto;
}

img{
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transition: 0.3s opacity ease-in-out;
}

  padding: 0;

 var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.opacity = 0; } myIndex++; if (myIndex > x.length) { myIndex = 1 } x[myIndex - 1].style.opacity = 1; setTimeout(carousel, 3000); // Change image every 3 seconds }

 .carousel { max-width: 100%; position: relative; height: auto; } img { width: 100%; position: absolute; left: 0; top: 0; display: block; transition: 0.3s opacity ease-in-out; }

 <div class="carousel"> <img class="mySlides" src="https://source.unsplash.com/random"> <img class="mySlides" src="https://source.unsplash.com/random/?cat"> <img class="mySlides" src="https://source.unsplash.com/random/?dog"> </div>

Answer 2

I hope it would help you.

 .logo-container { position: relative; }.bannerImg01 { animation: bannerImg01 15s infinite; }.bannerImg02 { position: absolute; top: 0; left: 0; animation: bannerImg02 15s infinite; }.bannerImg03 { position: absolute; top: 0; left: 0; animation: bannerImg03 15s infinite; } @keyframes bannerImg01 { 0% {opacity: 1;} 20.833333% {opacity: 1;} 33.333333% {opacity: 0;} 87.5% {opacity: 0;} 100% {opacity: 1} } @keyframes bannerImg02 { 0% {opacity: 0;} 20.833333% {opacity: 0;} 33.333333% {opacity: 1;} 54.166666% {opacity: 1;} 66.666666% {opacity: 0;} 100% {opacity: 0;} } @keyframes bannerImg03 { 0% {opacity: 0;} 54.166666% {opacity: 0;} 66.666666% {opacity: 1;} 87.5% {opacity: 1;} 100% {opacity: 0;} }

 <div class="logo-container"> <img class="bannerImg01" src="assets/img/big_logo_1.svg" max-width="100%"> <img class="bannerImg02" src="assets/img/big_logo_2.svg" max-width="100%"> <img class="bannerImg03" src="assets/img/big_logo_3.svg" max-width="100%"> </div>

Answer 3

/* The animation code */
@keyframes example {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* The element to apply the animation to */
.mySlides {
  animation-name: example;
  animation-duration: 4s;
}

Adding something like this will allow you to dictate how the images appear. In other words, look into css animations. Source: https://www.w3schools.com/css/css3_animations.asp

Answer 4

instead of using the display:block/none use opacity:0/1 and add a transition:opacity 300ms ease to get it smooth like so:

    .mySlides {
      opacity:0; 
      max-width: 100%;
      transition:opacity 300ms ease
}
    .mySlides.active {opacity:1}

In javascript

   var x = [...document.getElementsByClassName("mySlides")];
   var current = 0
    function carousel(){
      x.forEach(el=>el.classList.remove('active'))    
      current=current<x.length-1?current+1:0;
            x[current].classList.add('active');
    }
    setInterval(carousel,3000)