This lightweight slideshow was found at https://codepen.io/leemark/pen/DvliI. It can be quickly set up, and more (or less) images can be added. A couple of tweaks you need to know about:
There is some CSS in the Page manager Head section since SD3 is still lacking some of the styling options for animations. You will find something like this: '.x-fade li:nth-child(4) {animation: xfade 16s 0s 3;}' (without the inverted commas).
On this page I have actually got two lists, the actual slideshow with the images, and this list of tweaks. Therefore, the first part of that css code, '.x-fade li:nth-child(4)' is telling you which list is to be animated, namely the '.x-fade' one. Without the prefixed '.x-fade' both lists will start rotating. You probably don't want that. ;)
The first number, 16s, is the duration of the whole animation cycle. Obviously, it has to be the same for all the images.
The next number, in this case 0s, is how far into the animation cycle the images are to change. I'm letting them change every 4 seconds, but the intervals don't necessarily have to be the same length.
The third number is for how many iterations you want the slideshow to run. I have chosen 3 times. If you want to let it run as long as the page is open, you write 'infinite' (without the inverted commas) instead of a number.
The keyframes are saying how fast the fading is to happen. You can play with the %-age, add more if you like.
The whole slideshow is sitting inside a container 'banner-holder', which also has a 'banner', a transparent overlay for anything you want to position on top.
The container 'x-fade' is a list container with relative positioning, and the list items are positioned absolute. This leads to so-called 'parent collapse' and any new content placed below this will slide up behind the images, unless you give the list container (the parent) some dimensions, preferrably the same width and height as the images. The container 'banner-holder' also needs those same dimensions.
In order to keep these hints and tweaks I recommend saving this as a theme. A component of the slideshow can be made by selecting the container 'x-fade'. If you want the text overlay too, then make the component by selecting the container 'banner-holder'.
This lightweight slideshow was found at https://codepen.io/leemark/pen/DvliI. It can be quickly set up, and more (or less) images can be added. A couple of tweaks you need to know about:
The container 'x-fade' is a list container with relative positioning, and the list items are positioned absolute. This leads to so-called 'parent collapse' and any new content placed below this will slide up behind the images, unless you give the list container (the parent) some dimensions, preferrably the same width and height as the images. The container 'banner-holder' also needs those same dimensions.
In order to keep these hints and tweaks I recommend saving this as a theme. A component of the slideshow can be made by selecting the container 'x-fade'. If you want the text overlay too, then make the component by selecting the container 'banner-holder'.