JSFiddle - React, Tailwind, and code Playground

by Pythorogus

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Slider</title>
  </head>
  <body>
    <div class="slider-container">
      <div class="menu">
        <label for="slide-dot-1"></label>
        <label for="slide-dot-2"></label>
        <label for="slide-dot-3"></label>
      </div>
      
      <input class="slide-input" id="slide-dot-1" type="radio" name="slides" checked>
      <img class="slide-img" src="https://www.codeur.com/tuto/wp-content/uploads/2021/12/slide1.jpg">

      <input class="slide-input" id="slide-dot-2" type="radio" name="slides">
      <img class="slide-img" src="https://www.codeur.com/tuto/wp-content/uploads/2021/12/slide2.jpg">
      
      <input class="slide-input" id="slide-dot-3" type="radio" name="slides">
      <img class="slide-img" src="https://www.codeur.com/tuto/wp-content/uploads/2021/12/slide3.jpg">

    </div>
  </body>
</html>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
}
.slider-container {
  max-width: 800px;
  position: relative;
  margin: auto;
  height: 350px;
  overflow: hidden;
}
.menu {
  position: absolute;
  left: 0;
  z-index: 11;
  width: 100%;
  bottom: 0;
  text-align: center;
}
.menu label {
  cursor: pointer;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50px;
  margin: 0 0.2em 1em;
}
.menu label:hover,.menu label:focus {
  background: #1c87c9;
}
.slide-input{
  opacity: 0;
}
.slide-img {
  width: 100%;
  height: 300px;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 10;
  transition: left 0s 0.75s;
}
[id^="slide"]:checked + .slide-img {
  left: 0;
  z-index: 100;
  transition: left 0.65s ease-out;
}