Animated Image Slider Carousel With JavaScript

Preview:

Description:

Have you ever wanted to create a cool animated image slider?

Maybe you’re looking to spice up your homepage or squeeze page with an interesting effect.

Well look no further than this post. In this tutorial, I’ll show you how to create a cool animated image slider/carousel using only JavaScript and CSS.

How to use it:

1. Add images together with next/prev buttons to the slider. In this example, we use Boxicons for the left & right arrows. The data-info attribute is used to define the text to be displayed in the image caption bar.

<div class="content">
  <i data-action="left" class='btn-chevron left bx bx-chevron-left'></i>
  <div class="slider">
    <img data-info="Image Description 1" class="slider-image" src="1.jpg">
    <img data-info="Image Description 2" class="slider-image" src="2.jpg">
    <img data-info="Image Description 3" class="slider-image" src="3.jpg">
    ... more image here
  </div>
  <i data-action="right" class='btn-chevron right bx bx-chevron-right'></i>
</div>

2. The necessary CSS styles for the slider.

/* slider styles */
.slider {
  width: inherit;
  height: inherit;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: all 0.75s;
}
/* image caption */
.slider-info {
  position: absolute;
  width: auto;
  z-index: 1;
  top: 0.75rem;
  right: 0rem;
  background: #0135ec;
  color: #fff;
  border-radius: 15px 0 0 15px;
  padding: 0.5rem 0.75rem;
  transition: 1s;
}
/* image */
.slider-image {
  opacity: 1;
  width: inherit;
  height: inherit;
  object-fit: cover;
  transition: 1s;
}
.slider-image-active {
  opacity: 1;
}
/* navigation */
.btn-chevron {
  position: absolute;
  top: 50%;
  z-index: 999;
  background: #0135ec;
  font-size: 1.5rem;
  color: #fff;
  border-radius: 100%;
  padding: 0.5rem;
  cursor: pointer;
  transition: 0.5s all;
}
.left {
  left: 1rem;
}
.right {
  right: 1rem;
}
/* pagination */
.indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  color: #fff;
  cursor: pointer;
}
.indicator-active {
  width: 30px;
  height: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  background: #0135ec;
  padding: 0.3rem;
  transition: 0.5s all;
  border-radius: 100%;
}

3. Load the needed JavaScript files at the end of the document. That’s it.

<script src="js/library.js"></script>
<script src="js/script.js"></script>