Automatic Vertical Image Carousel In Pure CSS – TC Slider

Category: CSS & CSS3 , Slider | March 13, 2024
Author:alihomayouni
Views Total:89 views
Official Page:Go to website
Last Update:March 13, 2024
License:MIT

Preview:

Automatic Vertical Image Carousel In Pure CSS – TC Slider

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.

You Might Be Interested In:


Leave a Reply