Slider with :focus

by Simon Hi

HTML

<div class="slider">
  <figure tabindex="0">
    <img alt="img1" src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Flabellina-300x200.jpg">
    <figcaption>Ma belle image</figcaption>
  </figure>
  <figure tabindex="0">
    <img alt="img2" src="https://upload.wikimedia.org/wikipedia/commons/8/84/2012-07-26_141021-300x200.png">
    <figcaption>Ma splendide image</figcaption>
  </figure>
  <figure tabindex="0">
    <img alt="img3" src="https://upload.wikimedia.org/wikipedia/commons/2/20/Il-Ballo-del-Doge-2015-4-300x200.jpg">
    <figcaption>Ma superbe image</figcaption>
  </figure>
  <figure tabindex="0">
    <img alt="img4" src="https://upload.wikimedia.org/wikipedia/commons/3/35/Quebecchateaufrontenac_rs_300x.jpg">
    <figcaption>Ma magnifique image</figcaption>
  </figure>
  <figure tabindex="0">
    <img alt="img5" src="https://upload.wikimedia.org/wikipedia/commons/f/f7/HP_lafayetteShipSq-1-300x200.jpg">
    <figcaption>Ma merveilleuse image</figcaption>
  </figure>
</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;
}

.slider img {
  display: block;
  width: 100%;
  user-select: none;
}

.slider figcaption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  color: #fff;
  text-align: center;
  width: calc(50% - 3em);
  font-size: 2em;
  user-select: none;
  pointer-events: none;
}

.slider:before,
.slider:after {
  display: block;
  position: absolute;
  z-index: 100;
  top: 50%;
  width: 2em;
  height: 2em;
  line-height: 2em;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #0007;
  pointer-events: none;
  opacity: 0;
}

.slider:before {
  content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 4 4' opacity='0.5' fill='white'><path d='M-1.25 0 0.75 -1 0.75 1Z'/></svg>");
  left: 0.5em;
}

.slider:after {
...