<div class="slider">
  <div class="slides">
    <input type="radio" name="slider" id="slide1" checked>
    <input type="radio" name="slider" id="slide2" >
    <input type="radio" name="slider" id="slide3" >
    <input type="radio" name="slider" id="slide4" >
    <div class="slide"><img src="https://picsum.photos/seed/123/800/400" alt="Slide 1"></div>
    <div class="slide"><img src="https://picsum.photos/seed/246/800/400" alt="Slide 2"></div>
    <div class="slide"><img src="https://picsum.photos/seed/369/800/400" alt="Slide 3"></div>
    <div class="slide"><img src="https://picsum.photos/seed/492/800/400" alt="Slide 4"></div>
    <div class="navigation">
      <label for="slide1" class="bar"></label>
      <label for="slide2" class="bar"></label>
      <label for="slide3" class="bar"></label>
      <label for="slide4" class="bar"></label>
    </div>
  </div>
</div>

/* Pure CSS Slider */
.slider {
  width: 100%;
  max-width: 800px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.slides {
  width: 100%;
  height: 100%;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Logic for switching slides */
input[id="slide1"]:checked ~ .slide:nth-of-type(1),
input[id="slide2"]:checked ~ .slide:nth-of-type(2),
input[id="slide3"]:checked ~ .slide:nth-of-type(3),
input[id="slide4"]:checked ~ .slide:nth-of-type(4) {
  opacity: 1;
  z-index: 1;
}

/* Inputs hidden */
.slider input {
  display: none;
}

/* Navigation */
.navigation {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}

.bar {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.3s;
}

.bar:hover {
  background: #fff;
}

input[id="slide1"]:checked ~ .navigation .bar:nth-of-type(1),
input[id="slide2"]:checked ~ .navigation .bar:nth-of-type(2),
input[id="slide3"]:checked ~ .navigation .bar:nth-of-type(3),
input[id="slide4"]:checked ~ .navigation .bar:nth-of-type(4) {
  background: #ffffff;
  transform: scale(1.2);
}