@Gary, sorry but the code you supplied is mostly nothing to do with any slider but instead is for Google's tracking mission!

Your slider did use anime.js and that is invoked by the very first <script> call only.
The rest is in the Page Body:
Code:
<script>
      var images =      [].slice.call(document.querySelectorAll('.photo')).slice(1, 100);
      var showtime = 1500;
      var carousel = {
      targets: images,
      opacity: [0, 1],
      delay: anime.stagger(4 * showtime),
      easing: 'linear',
      duration: 2 * showtime,
      endDelay: showtime,
      loop: true,
      }
      anime(carousel);
      </script>
That aside, anime.js is probably overkill (as would the use of jQuery).
My preference is a pure CSS approach as JavaScript can be blocked by the viewer and the carousel never renders.

CSS - Simple Carousel.xar requires a little explanation.
It is tuned for 9 shapes - any size and orientation (images, Groups, Text blocks, blobs). You simply give them all a ClassName of htmlclass="slide".
If you have fewer, you change --scount in Page Body. You also have to delete all .slide:nth-of-type() lines with any number bigger than your current --scount value.
If you have more, you change --scount in Page Body. You also have to add new .slide:nth-of-type() lines with numbers that increment the previous line until you reach your current --scount value.

Here, I have 9 slides that I wanted to show for 5.555 seconds each, a total of 50 seconds.
This is somewhat artificial but it make the percentage calculates in the @keyframes block: each 2% is one second in this 50-second carousel.
We have each slide is delayed to appear 5.555 seconds after the previous.
It is initial invisible and off the the left its own width.
Over the next second, it is revealed and moves to its spot and stays there for 5 seconds.
It then takes a second to fade out and move a little to the right.

You can change the fade and shifts or include your own transformations.

Acorn