I want to randomize and add smooth transitioning to list of images

Question

I'm currently looping a list of images. Below is what I have so far. I'm not able to properly randomize the list.

Also, how can I go about transitioning to next image. I want to my images to smoothly fade into the next image instead of just quickly changing the image to next.

HTML

<div class="TestRotator">
    <img height="170" id="rotator" class="img-fluid, image-hover" alt="Responsive image"/>
</div>
<script src="js_src/art-imagechanger.js"></script>

JS

(function () {
    var rotator = document.getElementById("rotator"); 
    
      var imageDir = ['https://vignette.wikia.nocookie.net/birds/images/0/09/Birds-01.jpg','https://nas-national-prod.s3.amazonaws.com/styles/hero_mobile/s3/h_a1_7443_5_painted-bunting_julie_torkomian_adult-male.jpg','https://www.allaboutbirds.org/news/wp-content/uploads/2020/07/STanager-Shapiro-ML.jpg',];
    var i = 0;
    function loop() {
    if(i > (imageDir.length - 1)){
        i = 0;
    }
    var r = rotator.src = imageDir[i];
    Math.floor(Math.random() * r)
    i++;
    loopTimer = setTimeout(loop ,3000);
    }
    loop();
  })();
  

Answer 1

For randomization, check out the shuffle function for js arrays in this question.

As for fading in, this requires some adjustment to your html. You need to have 2 images present - the old one, and the new one.

<img height="170" id="rotator-old" class="img-fluid, image-hover" />
<img height="170" id="rotator-new" class="img-fluid, image-hover" />

Then in your js, you needto alter the classes of each, and apply see to fade the opacity. In your js:

var rotatorOld = document.getElementById("rotator-old"); 
var rotatorNew = document.getElementById("rotator-new"); 

var imageDir = [<image urls>];
var shuffledImages = shuffle(imageDir)
var i = 0;
function loop() {

  // remove visibility from image being transitioned to
  rotatorNew.classList.remove('visible')

  if(i > (imageDir.length - 1)){
    i = 0;
  }
  
  if (i > 0) { // starting from rest with the first image
    // set image in the background to previous image
    rotatorOld.src = shuffledImages[i-1]
  }

  // set image in the foreground to new image
  rotatorNew.src = shuffledImages[i]
  // add visibility class with css transition
  rotatorNew.classList.add('visible')

  i++;

  loopTimer = setTimeout(loop ,3000);

}

loop();

In your css, transition the opacity after 2.5 second delay with .5 second transition:

#rotator-new {
  opacity: 0;
}
#rotator-new.visible {
  opacity: 1;
  transition: opacity 500ms 2500ms // or whatever
}

You will also need to use some css to make sure both the old and new image overlay on top of each other properly. This can be done by setting the parent to have a position: relative; and each child img to have position: absolute; top: 0, bottom: 0; left: 0, right: 0;.

I didn't get a chance to test this code so it may need some adjusment to run properly. But if you make a codesandbox or codepen with some sample images I'm sure we can get it working. I also suggest looking for a 3rd party library to handle this for you if its not required to code this yourself. This is called a carousel, and Boostrap makes a nice one you can use.