Just CSS. Absolutely NO jQuery/javascript or any other programming language.

Based on the previous demonstration and adapted to add a second information panel animating at the same time as the slide-step panel.

The slide indication has also been improved.

Again, CSS variables are used so that there is only one calculation necessary for any number of images.

For this demonstration I have used 5 images with a show time of 4.5s and a slide time of 0.5s.

The only calculation necessary is the @keyframes slide and I have commented this in the stylesheet. It is a pity that CSS variables are not allowed in @keyframes percentage values.

This is also responsive and at 720px width the information panel moves under the images so that the images are full width on smartphones.

The stylesheet for this demonstration is in the page head, but if you use this, please keep my copyright comment with the stylesheet.