Slideshows

[gwpriester]

I almost forgot this option:

Acorn gave me a simple script that creates a simple fade from slide to slide www.eyetricks-3d-stereograms.com The script can be altered.

The images are simply stacked, one atop the other on the page and display in the order they are stacked.

Each photo has the same name: htmlclass="photo"

And this script goes in the Page > Head window

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89h gyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Global site tag (gtag.js) - Google Ads: 1069362885 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-1069362885"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-1069362885');
</script>

[Acorn]

@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:

<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

[gwpriester]

This is why I am not doing website design any more.

[Egg Bramhill]

Very interesting effect Acorn. Here's one just messing with your ideas:

LINK

[Acorn]

Very interesting effect Acorn. Here's one just messing with your ideas:
LINK

Egg, I like the small letter displacement, it makes it quite funky.

Acorn