4+ Carousel Components - Vanilla CSS

Carousels provide an interactive way to display multiple pieces of content, such as images or testimonials, in a visually engaging manner. With HTML and CSS, creating sleek and functional carousels is accessible to developers of all skill levels. In this collection, we've gathered a variety of HTML and CSS carousel designs that you can seamlessly incorporate into your website without relying on JavaScript or external libraries. Whether you're showcasing products, portfolios, or blog posts, our collection offers options to enhance the presentation of your content and captivate your audience. Let's explore how HTML and CSS carousels can add visual interest and interactivity to your website, improving user engagement and enhancing the overall browsing experience!

Image Gallery Carousel with Swiper.js Integration

Enhance your website's visual appeal with a dynamic image gallery carousel powered by Swiper.js. Learn how to integrate SwiperJs to create a captivating carousel that showcases your images beautifully

Author: Joe

Preview
Code

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<div class="gallery">
  <div class="swiper gallery-cards">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <article class="gallery__card">
          <img
            src="https://images.unsplash.com/photo-1669671943625-e20799ee5f42?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzI0MjY3ODQ&ixlib=rb-4.0.3&q=80&w=400"
            alt="image gallery"
            class="gallery__img"
          />
          <div class="gallery__data">
            <h3 class="gallery__title">Shoes</h3>
            <span class="gallery__subtitle">Feet</span>
          </div>
        </article>
      </div>

      <div class="swiper-slide">
        <article class="gallery__card">
          <img
            src="https://images.unsplash.com/photo-1670832215724-cce6d9ee619c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzI0MjY3ODQ&ixlib=rb-4.0.3&q=80&w=400"
            alt="image gallery"
            class="gallery__img"
          />
          <div class="gallery__data">
            <h3 class="gallery__title">Lotion</h3>
            <span class="gallery__subtitle">Face</span>
          </div>
        </article>
      </div>

      <div class="swiper-slide">
        <article class="gallery__card">
          <img
            src="https://images.unsplash.com/photo-1670509684960-101c061c9c5c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzI0MjY4MzU&ixlib=rb-4.0.3&q=80"
            alt="image gallery"
            class="gallery__img"
          />
          <div class="gallery__data">
            <h3 class="gallery__title">Christmas</h3>
            <span class="gallery__subtitle">Tree</span>
          </div>
        </article>
      </div>

      <div class="swiper-slide">
        <article class="gallery__card">
          <img
            src="https://images.unsplash.com/photo-1670825372656-af0361b7425a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzI0MjY4MzU&ixlib=rb-4.0.3&q=80&w=400"
            alt="image gallery"
            class="gallery__img"
          />
          <div class="gallery__data">
            <h3 class="gallery__title">Vanagon</h3>
            <span class="gallery__subtitle">VW</span>
          </div>
        </article>
      </div>

      <div class="swiper-slide">
        <article class="gallery__card">
          <img
            src="https://images.unsplash.com/photo-1671967097680-f5938c6aea1a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzI0MjY4MzU&ixlib=rb-4.0.3&q=80&w=400"
            alt="image gallery"
            class="gallery__img"
          />
          <div class="gallery__data">
            <h3 class="gallery__title">Explore</h3>
            <span class="gallery__subtitle">Waterfall</span>
          </div>
        </article>
      </div>
    </div>
  </div>

  <div class="gallery__overflow">
    <div class="swiper gallery-thumbs">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="gallery__thumbnail">
            <img
              src="https://images.unsplash.com/photo-1669671943625-e20799ee5f42?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzI0MjY3ODQ&ixlib=rb-4.0.3&q=80&w=400"
              alt="image gallery"
              alt="image thumbnail"
              class="gallery__thumbnail-img"
            />
          </div>
        </div>

        <div class="swiper-slide">
          <div class="gallery__thumbnail">
            <img
              src="https://images.unsplash.com/photo-1670832215724-cce6d9ee619c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzI0MjY3ODQ&ixlib=rb-4.0.3&q=80&w=400"
              alt="image gallery"
              alt="image thumbnail"
              class="gallery__thumbnail-img"
            />
          </div>
        </div>

        <div class="swiper-slide">
          <div class="gallery__thumbnail">
            <img
              src="https://images.unsplash.com/photo-1670509684960-101c061c9c5c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzI0MjY4MzU&ixlib=rb-4.0.3&q=80"
              alt="image thumbnail"
              class="gallery__thumbnail-img"
            />
          </div>
        </div>

        <div class="swiper-slide">
          <div class="gallery__thumbnail">
            <img
              src="https://images.unsplash.com/photo-1670825372656-af0361b7425a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzI0MjY4MzU&ixlib=rb-4.0.3&q=80&w=400"
              alt="image gallery"
              alt="image thumbnail"
              class="gallery__thumbnail-img"
            />
          </div>
        </div>

        <div class="swiper-slide">
          <div class="gallery__thumbnail">
            <img
              src="https://images.unsplash.com/photo-1671967097680-f5938c6aea1a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzI0MjY4MzU&ixlib=rb-4.0.3&q=80&w=400"
              alt="image thumbnail"
              class="gallery__thumbnail-img"
            />
          </div>
        </div>
      </div>

      <div class="swiper-pagination"></div>
    </div>

    <div class="swiper-button-next">
      <i class="ri-arrow-right-line"></i>
    </div>
    <div class="swiper-button-prev">
      <i class="ri-arrow-left-line"></i>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");

:root {
  --first-color: hsl(30, 16%, 50%);
  --text-color: #fff;
  --text-color-black: hsl(30, 8%, 15%);
  --body-color: hsl(30, 100%, 98%);

  --body-font: "Poppins", sans-serif;
  --h3-font-size: 1rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;
}

@media screen and (min-width: 1024px) {
  :root {
    --h3-font-size: 1.125rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  background-color: var(--body-color);
}

img {
  max-width: 100%;
  height: auto;
}

.gallery {
  height: 100vh;
  display: grid;
  align-content: center;
  justify-content: center;
}

.gallery__card {
  position: relative;
  width: 208px;
  height: 268px;
  border-radius: 3rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.gallery__img,
.gallery__card::after,
.gallery__data {
  position: absolute;
}

.gallery__img {
  inset: 0;
  margin: auto;
  transition: transform 0.3s;
}

.gallery__card::after {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    hsla(0, 0%, 100%, 0) 32%,
    hsla(0, 0%, 0%, 0.3) 100%
  );
  top: 0;
  z-index: 1;
}

.gallery__data {
  bottom: 1.5rem;
  left: 1.75rem;
  z-index: 10;
}

.gallery__title,
.gallery__subtitle {
  color: var(--text-color);
  font-weight: 500;
}

.gallery__title {
  font-size: var(--h3-font-size);
}

.gallery__subtitle {
  font-size: var(--smaller-font-size);
}

.gallery__overflow {
  position: relative;
}

.gallery__thumbnail {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 1.5rem;
  overflow: hidden;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
  transition: transform 0.3s;
}

.gallery__thumbnail-img {
  position: absolute;
  inset: 0;
  margin: auto;
}

.gallery-cards,
.gallery-thumbs {
  width: 260px;
}

.gallery-cards:hover .gallery__img {
  transform: scale(1.1);
}

.gallery .swiper-wrapper {
  padding: 2.5rem 0;
}

.gallery-thumbs {
  height: 132px;
}

.swiper-slide-active .gallery__thumbnail {
  transform: translateY(-1.25rem) scale(1.2);
}

.swiper-slide-next .gallery__thumbnail {
  transform: rotate(15deg);
}

.swiper-slide-prev .gallery__thumbnail {
  transform: rotate(-15deg);
}

.swiper-pagination-fraction {
  font-size: var(--small-font-size);
  letter-spacing: -1px;
  font-weight: 500;
  color: var(--first-color);
  bottom: 0;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  content: "";
}

.swiper-button-next,
.swiper-button-prev {
  font-size: 1.5rem;
  color: var(--text-color-black);
  top: 5.5rem;
}

.swiper-button-next {
  right: -1.5rem;
  transform: rotate(15deg);
}

.swiper-button-prev {
  left: -1.5rem;
  transform: rotate(-15deg);
}

.gallery-cards::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: initial;
}


@media screen and (max-width: 320px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .gallery__card {
    width: 220px;
    height: 290px;
  }
  .gallery__thumbnail {
    width: 65px;
    height: 65px;
  }
  .gallery-cards,
  .gallery-thumbs {
    width: 280px;
  }
}

let swiperCards = new Swiper(".gallery-cards", {
  loop: true,
  loopedSlides: 5,
  cssMode: true,
  effect: "fade",
});

let swiperThumbs = new Swiper(".gallery-thumbs", {
  loop: true,
  loopedSlides: 5,
  slidesPerView: 3,
  centeredSlides: true,
  slideToClickedSlide: true,

  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

swiperThumbs.controller.control = swiperCards;

Signup Carousel with SwiperJs

Optimize the signup process on your website with a carousel powered by Swiper.js. Learn how to implement a dynamic signup carousel to guide users through the signup journey seamlessly.

Author: Joe

Preview
Code

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<div class="card">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://raw.githubusercontent.com/frontend-joe/es6-carousel/28f8f65dcf701ac0558487777f033915244f37e0/carousel-1/1.svg" />
        <h2>Create Account</h2>
        <h3>Tell us who you are</h3>
        <input type="text" placeholder="Your name" />
      </div>
      <div class="swiper-slide">
        <div className="image-wrapper">
          <img src="https://raw.githubusercontent.com/frontend-joe/es6-carousel/28f8f65dcf701ac0558487777f033915244f37e0/carousel-1/2.svg" />
        </div>
        <h2>Security Info</h2>
        <h3>Enter a strong password</h3>
        <input type="password" placeholder="Your password" />
      </div>
      <div class="swiper-slide">
        <div className="image-wrapper">
          <img src="https://raw.githubusercontent.com/frontend-joe/es6-carousel/28f8f65dcf701ac0558487777f033915244f37e0/carousel-1/3.svg" />
        </div>
        <h2>Get Started</h2>
        <h3>You're all set and ready</h3>
        <button>Let's Go</button>
      </div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

html,
body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #3b395c;
  font-family: "Euclid Circular A";
  text-align: center;
}

.card {
  width: 360px;
  padding: 0;
  border-radius: 10px;
  background: #27263c;
  box-shadow: 0px -6.8px 9.8px rgba(0, 0, 0, 0.003),
    0px -10.8px 23.5px rgba(0, 0, 0, 0.008),
    0px -10.3px 44.3px rgba(0, 0, 0, 0.016),
    0px -1.5px 79.1px rgba(0, 0, 0, 0.026),
    0px 28.5px 147.9px rgba(0, 0, 0, 0.042), 0px 174px 354px rgba(0, 0, 0, 0.07);
    margin: 20px 0;
}

h2 {
  color: #f9f9f9;
  margin: 0 0 6px;
  font-weight: 500;
}

h3 {
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 24px;
  font-weight: 400;
  font-size: 14px;
  align-self: stretch;
}

input,
button {
  display: block;
  width: 240px;
  height: 48px;
  margin: 0 70px;
  border-radius: 24px;
  font-size: 16px;
  font-family: inherit;
  outline-color: #3181f8;
  text-align: center;
}

input {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  padding: 12px;
}

input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

button {
  background: #864dfb;
  color: #f9f9f9;
  border: 0;
  cursor: pointer;
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 0 130px;
}

.swiper .swiper-pagination .swiper-pagination-bullet {
  box-shadow: none;
  background: #864dfb;
  width: 16px;
  height: 16px;
}

.swiper-horizontal .swiper-pagination-bullets.swiper-pagination-horizontal {
  top: auto;
  bottom: 56px;
}

.swiper-slide img {
  height: 170px;
  margin-bottom: 10px;
}

const swiper = new Swiper(".swiper", {
  speed: 500,

  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

Carousel with Coverflow Effect

Enhance your website's look with a carousel featuring a coverflow effect. Learn how to implement a dynamic carousel that provides an immersive browsing experience with coverflow transitions.

Author: Joe

Preview
Code

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<div class="swiper">
  <div class="swiper-wrapper">
    <div
      class="swiper-slide"
      style="background-image: url('https://raw.githubusercontent.com/frontend-joe/es6-carousel/main/carousel-3/img1.jpg')"
    ></div>
    <div
      class="swiper-slide"
      style="background-image: url('https://raw.githubusercontent.com/frontend-joe/es6-carousel/main/carousel-3/img2.jpg')"
    ></div>
    <div
      class="swiper-slide"
      style="background-image: url('https://raw.githubusercontent.com/frontend-joe/es6-carousel/main/carousel-3/img3.jpg')"
    ></div>
    <div
      class="swiper-slide"
      style="background-image: url('https://raw.githubusercontent.com/frontend-joe/es6-carousel/main/carousel-3/img4.jpg')"
    ></div>
    <div
      class="swiper-slide"
      style="background-image: url('https://raw.githubusercontent.com/frontend-joe/es6-carousel/main/carousel-3/img5.jpg')"
    ></div>
    <div
      class="swiper-slide"
      style="background-image: url('https://raw.githubusercontent.com/frontend-joe/es6-carousel/main/carousel-3/img6.jpg')"
    ></div>
    <div
      class="swiper-slide"
      style="background-image: url('https://raw.githubusercontent.com/frontend-joe/es6-carousel/main/carousel-3/img7.jpg')"
    ></div>
    <div
      class="swiper-slide"
      style="background-image: url('https://raw.githubusercontent.com/frontend-joe/es6-carousel/main/carousel-3/img8.jpg')"
    ></div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

body {
  background: #b7a89f;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 350px;
  height: 350px;
}

var swiper = new Swiper(".swiper", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 3,
  speed: 600,
  coverflowEffect: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows: true,
  },
  loop: true,
});

Scroll-Snap Image Carousel

Elevate user interaction on your website with a scroll-snap image carousel. Learn how to implement a carousel that provides seamless scrolling and captivating image transitions.

Author: Joe

Preview
Code

<section class="carousel">
  <ol class="carousel__viewport">
    <li class="carousel__slide">
      <div
        class="carousel__snapper"
        style="background-image: url('https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-2/1.jpg')"
      ></div>
    </li>
    <li class="carousel__slide">
      <div
        class="carousel__snapper"
        style="background-image: url('https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-2/2.jpg')"
      ></div>
    </li>
    <li class="carousel__slide">
      <div
        class="carousel__snapper"
        style="background-image: url('https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-2/3.jpg')"
      ></div>
    </li>
    <li class="carousel__slide">
      <div
        class="carousel__snapper"
        style="background-image: url('https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-2/4.jpg')"
      ></div>
    </li>
    <li class="carousel__slide">
      <div
        class="carousel__snapper"
        style="background-image: url('https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-2/5.jpg')"
      ></div>
    </li>
    <li class="carousel__slide">
      <div
        class="carousel__snapper"
        style="background-image: url('https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-2/6.jpg')"
      ></div>
    </li>
    <li class="carousel__slide">
      <div
        class="carousel__snapper"
        style="background-image: url('https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-2/7.jpg')"
      ></div>
    </li>
  </ol>
</section>

body {
  display: grid;
  place-items: center;
  margin: 0;
  height: 100vh;
  padding: 0 50px;
}

* {
  box-sizing: border-box;
  scrollbar-color: transparent transparent; /* thumb and track color */
  scrollbar-width: 0px;
}

*::-webkit-scrollbar {
  width: 0;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

* {
  -ms-overflow-style: none;
}

ol,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel {
  position: relative;
  width: 100%;
  height: 30vh;
  perspective: 100px;
  overflow: hidden;
}

.carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel::before,
.carousel::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  translate: -50% 0;
  width: 500%;
  height: 500%;
  border-radius: 50%;
  background: #ffffff;
}

.carousel::before {
  top: -480%;
}

.carousel::after {
  bottom: -480%;
}

.carousel__slide {
  position: relative;
  flex: 0 0 33.33%;
  width: 33.33%;
  counter-increment: item;
}

.carousel__slide:before {
  content: counter(item);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -40%, 70px);
}

.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  background-size: cover;
  background-position: 50%;
  border: 10px solid #ffffff;
}

```
No need of JavaScript
```

Simple Image Carousel

Enhance visual appeal on your website with a simple image carousel. Learn how to implement an image carousel to showcase dynamic content effectively and engage users with captivating visuals.

Author: Joe

Preview
Code

<div class="carousel">
  <div class="carousel-controls">
    <input id="1" type="radio" name="controls" checked />
    <input id="2" type="radio" name="controls" />
    <input id="3" type="radio" name="controls" />
    <div class="dots">
      <label for="1"></label>
      <label for="2"></label>
      <label for="3"></label>
    </div>
    <div class="carousel-images">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-1/1.jpg" />
      <img src="https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-1/2.jpg" />
      <img src="https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-1/3.jpg" />
    </div>
  </div>
</div>

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

html,
body,
.carousel {
  height: 100%;
}

.carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.carousel-images {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  width: 300%;
  height: 100%;
  transition: 0.5s;
}

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

.carousel-controls {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

input {
  display: none;
}

input,
label {
  position: relative;
  z-index: 2;
}

label {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0.3;
  backdrop-filter: blur(20px);
  cursor: pointer;
  transition: 0.3s;
}

.dots {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 400px;
  background: linear-gradient(transparent, #000 90%);
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 50px;
}

input:nth-child(1):checked ~ .dots label:nth-child(1),
input:nth-child(2):checked ~ .dots label:nth-child(2),
input:nth-child(3):checked ~ .dots label:nth-child(3) {
  background: rgba(255, 255, 255, 0.95);
  opacity: 1;
  backdrop-filter: none;
}

input:nth-child(1):checked ~ .carousel-images {
  translate: 0;
}

input:nth-child(2):checked ~ .carousel-images {
  translate: -100vw;
}

input:nth-child(3):checked ~ .carousel-images {
  translate: -200vw;
}

```
No need of JavaScript
```