CSS-only Image Carousel

[Acorn]

Xara has recently released its sliders that are a vast improvement of early versions.
They still have a few challenges to overcome.

I am not in competition with the release but I feel the major omission is not fading out the previous slide.
This causes a problem with any slides that have any Transparency.

THE APPROACH
All SVG shapes or images have a ClassName htmlclass="slide"

1. Add in your slide collection
2. Add the ClassName to each

These can be positioned anyhow and anywhere.

I chose to put them all in a Group and in a !Slides layer to keep the clutter down.
The other advantage for this is you need only apply htmlclass="slide" to the group.
You can quickly add or remove your slides.
Hide the !Slides layer.

Note how many you have so marked or are in the group
Decide on a display time for each slide.
Open the Page HTML code body and make the following adjustments:

1. Change the --time CSS variable
2. Change the --slides CSS variable
3. Increment the .slide:nth-child(nn) { animation-delay: calc( ( nn - 1 ) * var(--time) ); } statements to equal the number off slides
4. HARDEST PART: For the @keyframes statements, divide 100% by the number of slides:
   
   1. This has to be the difference between the first percentage (here 2%) and the second (here 6%) - the difference here is 4% as there are 25 slides
   2. The first percentage is the lead in, the second is the display and the third, the tail off
   
   
5. Apply everything and Preview

Here is my demo file (all SVGs for file size): 20240803-CSS-Group Slider.xar

The transform functions in the @keyframes statements are just there to show you can manipulate your slides a a wide range of fashions.

Acorn

[gwpriester]

Sweet. Is there any way to save/export this a video file?

[Acorn]

Sweet. Is there any way to save/export this a video file?

Gary, are we talking about a carousel of your stereograms in a video format?

1. I've not tried but https://html5animationtogif.com/html5tovideo might do.

2. A screengrab with Camstudio.

3. Normally, you would use Puppeteer, node.js and and a lot of hocus pocus to grab each millisecond CSS step to avoid dropping frames.

I need your thoughts.

Acorn

[Egg Bramhill]

I recorded Acorns slider using ScreenPal. Would this quality suffice Gary?

VIDEO

[Acorn]

I recorded Acorns slider using ScreenPal. Would this quality suffice Gary?
VIDEO

Egg, thank you for taking the time.

Acorn

[gwpriester]

Fantastic Egg and Acorn. (Hmm? An egg and a acorn)

[Acorn]

Fantastic Egg and Acorn. (Hmm? An egg and a acorn)

What?

An egg and an acorn walked into a bar, ...both said "Ouch!".

Acorn

[Acorn]

Egg, thank you for taking the time. Acorn

I've just tried the on-line convertor and it looks very smooth.
Free trial is limited to 30 seconds so i set the --time to 1.2s

MP4 resultant file size is 32MB but I am sure it can be compressed.
Got it down to 17MB: https://www.dropbox.com/scl/fi/o9h08...=ka80xtfb&dl=0

I don't normally go for subscriptions but for those who are interested, this site has a one-off month fee for unlimited conversions for $9.

Acorn

[Acorn]

Swap in this @keyframes statement:

@keyframes fadeIn { 0% {
opacity: 1;
transform-origin: left;
transform: scale(0.1);
}
0.5%, 5.5% {
transform: scale(1);
}
5.75%, 100% {
filter: hue-rotate(180deg) saturate(10%) invert(100%) blur(5px);
transform-origin: right;
transform: scale(0);
}
}

Just for fun to see what can be varied.

Acorn

[Egg Bramhill]

Working on it Acorn but having issues understanding the @keyframes bit.

DEMO