Modern Smooth Image Slider In JavaScript

Preview:

Description:

A responsive, smooth banner/card slider that provides a stylish way to showcase visual media and content on your page.

How to use it:

1. The required HTML structure for the image slider.

<!-- Banner Slider -->
<div class="slider banner-slider" data-slider>
  <div class="slider-container" data-slider-container>
    <!-- Slides Here -->
    <div class="slider-item">
      <div class="card img-holder" style="--width: 1000; --height: 560">
        <img
          src="1.jpg"
          width="1000"
          height="560"
          alt=""
          class="img-cover"
        />
      </div>
    </div>
    <div class="slider-item">
      <div class="card img-holder" style="--width: 1000; --height: 560">
        <img
          src="2.jpg"
          width="1000"
          height="560"
          alt=""
          class="img-cover"
        />
      </div>
    </div>
    ... more images here ...
  </div>
  <!-- Next/Prev Buttons -->
  <button class="btn-icon slider-control prev" data-slider-prev>
    Prev Button Here
  </button>
  <button class="btn-icon slider-control next" data-slider-next>
    Next Button Here
  </button>
</div>

<!-- Card Slider -->
<div class="slider card-slider" data-slider>
  <div class="slider-container" data-slider-container>
    <!-- Slides Here -->
    <div class="slider-item">
      <div class="card img-holder" style="--width: 500; --height: 750">
        <img
          src="1.jpg"
          width="500"
          height="750"
          alt=""
          class="img-cover"
        />
      </div>
    </div>
    <div class="slider-item">
      <div class="card img-holder" style="--width: 500; --height: 750">
        <img
          src="2.jpg"
          width="500"
          height="750"
          alt=""
          class="img-cover"
        />
      </div>
    </div>
   ... more images here ... 
  </div>
  <!-- Next/Prev Buttons -->
  <button class="btn-icon slider-control prev" data-slider-prev>
    Prev Button Here
  </button>
  <button class="btn-icon slider-control next" data-slider-next>
    Next Button Here
  </button>
</div>

2. The necessary CSS styles for the slider.

.slider {
  --slider-items: 1;
  position: relative;
  width: 100%;
  padding-inline: 16px;
  overflow-x: hidden;
}
.slider::before,
.slider::after {
  content: '';
  position: absolute;
  top: 0;
  width: 24px;
  height: 100%;
  z-index: 1;
  background-image: linear-gradient(
    to var(--gr-direction, right),
    var(--background) 0%,
    transparent 100%
  );
}
.slider::before {
  left: 0;
}
.slider::after {
  right: 0;
  --gr-direction: left;
}
.slider-container {
  position: relative; /* mandatory for slider */
  display: flex;
  justify-content: flex-start;
  transition: transform 250ms ease;
}
.slider-item {
  min-width: calc(100% / var(--slider-items));
  width: calc(100% / var(--slider-items));
  padding-inline: 4px;
}
.card {
  background-color: var(--surface-variant);
  border-radius: var(--radius-12);
  overflow: hidden;
}
.img-holder {
  aspect-ratio: var(--width) / var(--height);
}
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.btn-icon {
  width: 40px;
  height: 40px;
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  font-size: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.5);
}
.slider-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.slider-control.prev {
  left: 0;
}
.slider-control.next {
  right: 0;
}
.slider-control:disabled {
  display: none;
}
/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/
/**
 * responsive for large than 567px screen
 */
@media (min-width: 567px) {
  .card-slider {
    --slider-items: 2;
  }
}
/**
 * responsive for large than 768px screen
 */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
  .card-slider {
    --slider-items: 3;
  }
}
/**
 * responsive for large than 992px screen
 */
@media (min-width: 992px) {
  .card-slider {
    --slider-items: 4;
  }
}
/**
 * responsive for large than 1200px screen
 */
@media (min-width: 1200px) {
  .banner-slider {
    --slider-items: 2;
  }
  .card-slider {
    --slider-items: 5;
  }
}

3. Add the main script right before the closing body tag. Done.

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