CODEWITHSUNDEEP
javascripthtmljquerycss
Manuel
Manuel

Reputation: 3

Smooth transition between each images

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
          }

Upvotes: 0

Views: 1564

Answers (4)

Abdel Kader Glt
Abdel Kader Glt

Reputation: 66

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)

Upvotes: 0

Benjamin Rochez
Benjamin Rochez

Reputation: 176

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>

Upvotes: 1

inerpiece
inerpiece

Reputation: 197

/* 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

Upvotes: 0

Kevin Shuguli
Kevin Shuguli

Reputation: 1749

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>

Upvotes: 0

Related Questions