Minimal slider with :focus

by Simon Hi

HTML

<div class="slider">
  <img tabindex="0" alt="img1" src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Flabellina-300x200.jpg">
  <img tabindex="0" alt="img2" src="https://upload.wikimedia.org/wikipedia/commons/8/84/2012-07-26_141021-300x200.png">
  <img tabindex="0" alt="img3" src="https://upload.wikimedia.org/wikipedia/commons/2/20/Il-Ballo-del-Doge-2015-4-300x200.jpg">
  <img tabindex="0" alt="img4" src="https://upload.wikimedia.org/wikipedia/commons/3/35/Quebecchateaufrontenac_rs_300x.jpg">
  <img tabindex="0" alt="img5" src="https://upload.wikimedia.org/wikipedia/commons/f/f7/HP_lafayetteShipSq-1-300x200.jpg">
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.slider {
  --t: 0.5s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  width: 90vmin;
  height: 60vmin;
  margin: 1em auto;
  background: #000;
}

.slider>* {
  display: block;
  position: absolute;
  outline: none;
  border: 0;
  width: 100%;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: 0 50%;
  opacity: 0;
  transition: left var(--t) ease-out, opacity 0s linear var(--t);
  user-select: none;
}

.slider>*:focus,
.slider:not(:focus-within)>*:first-child {
  opacity: 1;
  transition: left var(--t) ease-out;
}

.slider>* {
  z-index: 20;
}

.slider>*:focus,
.slider:not(:focus-within)>*:first-child {
  z-index: 40;
}

.slider>*:focus+*,
.slider:not(:focus-within)>*:first-child+* {
  z-index: 30;
}

.slider>*:first-child+*:focus~*:last-child {
  z-index: 10;
}

.slider>*:focus,
.slider:not(:focus-within)>*:first-child {
  left: -50%;
}

.slider>*:focus~*,
.slider:not(:focus-within)>*:not(:first-child) {
  left: 50%;
}

.slider>*,
.slider>*:first-child:focus~*:last-child,
.slider:not(:focus-within)>*:last-child {
  left: -150%;
}

.slider>*:focus,
.slider:not(:focus-within)>*:first-child {
  pointer-events: none;
}