Automatic Vertical Image Carousel In Pure CSS – TC Slider

Preview:

Description:

TC Slider is a customizable, automatic, vertical image carousel written entirely in HTML and CSS/CSS3.

This slider allows you to seamlessly scroll through a set of images in the vertical direction. Perfect for both beginners and seasoned developers to showcase multiple images, products, testimonials, or any other content in an easy way.

How to use it:

1. Add images as backgrounds to the TC Slider.

<div class="tcSlider">
  <div class="slider">
    <a class="slide" href="#">
      <div class="slider_img" style="background-image:url(1.jpg)"></div>
      <div class="slider_link">Slide 01</div>
    </a>
    <div class="slide">
      <div class="slider_img" style="background-image:url(2.jpg)"></div>
      <a class="slider_link" href="#">Slide 02</a>
    </div>
    <div class="slide">
      <div class="slider_img" style="background-image:url(3.jpg)"></div>
      <a class="slider_link" href="#">Slide 03</a>
    </div>
  </div>
</div>

2. The necessary CSS/CSS3 styles for the TC Slider.

:root {
  /* slider width */
  --slide-width: 800px;
  /* slider aspect ratio (width/height) */
  --slide-aspect: 3;
  /* animation time */
  --slide-time: 15s;
}
/* slider styles */
.tcSlider {
  width: var(--slide-width);
  aspect-ratio: var(--slide-aspect) / 1;
  background-color: #000;
  overflow: hidden;
  border-radius: 10px;
}
.slider {
  animation-name: tc_slider;
  animation-duration: var(--slide-time);
  animation-iteration-count: infinite;
}
.slide {
  position: relative;
}
.slider_img {
  width: var(--slide-width);
  aspect-ratio: var(--slide-aspect) / 1;
  background-position: center center;
  background-size: cover;
}
.slider_link {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  text-decoration: none;
  padding: 5px 15px;
  position: absolute;
  bottom: 20px;
  left: 20px;
}
/* animation */
@keyframes tc_slider {
  0% {
    margin-top: 0;
  }
  31% {
    margin-top: 0;
  }
  36% {
    margin-top: calc(var(--slide-width) / var(--slide-aspect) * -1);
  }
  64% {
    margin-top: calc(var(--slide-width) / var(--slide-aspect) * -1);
  }
  69% {
    margin-top: calc(var(--slide-width) / var(--slide-aspect) * -2);
  }
  97% {
    margin-top: calc(var(--slide-width) / var(--slide-aspect) * -2);
  }
}

3. You can easily add new slides to your slider by adding breakpoints to the @keyframes.