<!DOCTYPE html>
<html>
  <head>
    <title>Pure CSS slider</title>
  </head>
  <style>
  .slider { position: relative; /*height: 612px; height: 612px;*/ } /* May need to set height and width. */
  .slider > div { position: absolute; top: 0; left: 0; opacity: 0; }

  /* 5s per slide x 5 = 25s animation. */
  @keyframes slide_animation {
    0% {opacity: 0;}  /* Start hidden. */
    4% {opacity: 1;}  /* Fade in over 1 seconds. */
    20% {opacity: 1; transform: scale(1, 1); }  /* Show for 4 seconds. */
    /* Overlap fade out with fade in of next slide. Add a scale as eye candy. */
    24% {opacity: 0; transform: scale(0, 0); }
    }
  .slider > div { animation-name: slide_animation; animation-duration: 25s; animation-iteration-count: infinite; }
  .slider > div:nth-child(2)  { animation-delay: 5s; }
.slider > div:nth-child(3)  { animation-delay: 10s; }
.slider > div:nth-child(4)  { animation-delay: 15s; }
.slider > div:nth-child(5)  { animation-delay: 20s; }
  </style>
  <body>
    <p>More info in my <a href="https://www.damiencarbery.com/2020/09/pure-css-slider-proof-of-concept/">Pure CSS slider – proof of concept</a> post.</p>
    <div id="myslider" class="slider">
	<div><img src="http://placekitten.com/g/612/612"/></div>
<div><img src="https://unsplash.it/id/237/612/612"/></div>
<div><img src="https://unsplash.it/id/400/612/612"/></div>
<div><img src="https://unsplash.it/id/181/612/612"/></div>
<div><img src="https://unsplash.it/id/100/612/612"/></div>    </div>
  </body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.