Pure CSS Image Swapper

#CSS is constantly evolving, which opens up new possibilities for implementing components that were previously reserved exclusively for #Javascript.

Image Carousel 🎡 is one such component.

<div class="text">Pick a Sheep</div>
<div class="slider">
<div class="carousel">
  <div class="entries">
    <img id="img1" class="whitesheep">
    <img id="img2" class="blacksheep">
    ...
  </div>
</div>
<div class="markers">
  <a href="#img1"></a>
  <a href="#img2"></a>
  ...
</div>
</div>

.slider {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 1.0rem;
  padding: 1rem;
}
 
.carousel {
  width: 176px;
  overflow: hidden;
}
 
.entries {
  display: flex;
  justify-content: space-evenly;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.entries > img {
  position: relative;
  flex-shrink: 0;
  width: 176px;
  height: 231px;
  scroll-snap-align: center;
}

Pure CSS image carouse by Owieczka

Pure CSS image carouse by Owieczka

GitHub https://github.com/owieczka/CSS-image-carouse

---