Minimal Responsive Image Carousel – Classic Slider

Preview:

Description:

The Classic Slider is a lightweight and responsive image carousel built using HTML, CSS, and JavaScript.

It features auto-rotating, navigation arrows, pagination indicators, and a fade-in animation for slides.

How to use it:

1. Add the Boxicons CSS link to your webpage. OPTIONAL.

<link rel="stylesheet" href="/path/to/cdn/boxicons.min.css" />

2. Add your images and descriptive text within the slider.

<div class="slider">
  <!-- Slide 1 -->
  <div class="myslide fade">
    <div class="txt">
      <h1>IMAGE 1</h1>
      <p>Description 1</p>
    </div>
    <img class="slider_img" src="1.jpg" />
  </div>
  <!-- Slide 2 -->
  <div class="myslide fade">
    <div class="txt">
      <h1>IMAGE 2</h1>
      <p>Description 2</p>
    </div>
    <img class="slider_img" src="2.jpg" />
  </div>
  <!-- Slide 3 -->
  <div class="myslide fade">
    <div class="txt">
      <h1>IMAGE 3</h1>
      <p>Description 3</p>
    </div>
    <img class="slider_img" src="3.jpg" />
  </div>
  ... more slides here
  <!-- Navigation Arrows -->
  <!-- Feel free to replace the navigation icons here -->
  <a class="prev" onclick="plusSlides(-1)">
    <i class="bx bx-chevron-left"></i>
  </a>
  <a class="next" onclick="plusSlides(1)">
    <i class="bx bx-chevron-right"></i>
  </a>
  <!-- Pagination -->
  <div class="dotsbox" style="text-align: center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
</div>

3. The necessary CSS styles to handle the layout, animations, and responsiveness of the slider.

.slider {
  position: relative;
  width: 100%;
  background: #2c3e50;
  font-optical-sizing: auto;
  font-weight: 300;
}
.myslide {
  height: 400px;
  display: none;
  overflow: hidden;
}
.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 50px;
  padding: 15px;
  cursor: pointer;
  color: #d6d6d6;
  transition: 0.1s;
  user-select: none;
}
.prev:hover,
.next:hover {
  color: #ffffff;
}
.next {
  right: 0;
}
.dotsbox {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 7px;
  cursor: pointer;
}
.dot {
  display: inline-block;
  width: 33px;
  height: 3px;
  background-color: #b7b7b7;
  border-radius: 3px;
  margin: 0 10px;
  cursor: pointer;
}
.active,
.dot:hover {
  background-color: #FFF;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {
    opacity: 0.3
  }
  to {
    opacity: 1
  }
}
@keyframes fade {
  from {
    opacity: 0.3
  }
  to {
     opacity: 1
  }
}
.txt {
  position: absolute;
  color: #fff;
  letter-spacing: 2px;
  line-height: 35px;
  top: 40%;
  left: 15%;
  -webkit-animation-name: posi;
  -webkit-animation-duration: 2s;
  animation-name: posi;
  animation-duration: 2s;
  z-index: 1;
}
@-webkit-keyframes posi {
  from {
    left: 25%;
  }
  to {
    left: 15%;
  }
}
@keyframes posi {
  from {
    left: 25%;
  }
  to {
    left: 15%;
  }
}
.txt h1 {
  color: #d2d2d2;
  font-size: 50px;
  margin-bottom: 20px;
}
.txt p {
  font-weight: 3  00;
  font-size: 20px;
}
@-webkit-keyframes zoomin {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}
@keyframes zoomin {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}
@media screen and (max-width: 800px) {
  .myslide {
    height: 210px;
  }
  .txt {
    letter-spacing: 2px;
    line-height: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation-name: posi2;
    -webkit-animation-duration: 2s;
    animation-name: posi2;
    animation-duration: 2s;
  }
  @-webkit-keyframes posi2 {
    from {
      top: 35%;
    }
    to {
      top: 50%;
    }
  }
  @keyframes posi2 {
    from {
      top: 35%;
    }
    to {
      top: 50%;
    }
  }
  .txt h1 {
    font-size: 40px;
  }
  .txt p {
    font-size: 13px;
  }
}
@media screen and (max-width: 520px) {
  .txt h1 {
    font-size: 30px;
    margin-bottom: 20px;
  }
  .prev,
  .next {
      display: none;
  }
  .dot {
      width: 19px;
      margin: 0 3px;
  }
}
.slider_img {
  width: 100%;
  height: auto;
  background-size: cover;
}
.slider_text {
  margin-top: 45px;
  max-width: 400px;
  font-size: 25;
}
@media screen and (max-width: 500px) {
  .slider_text {
      display: block;
  }
  .dotsbox {
      display: none;
  }
}

4. Add the JavaScript code to activate the slider functionality. This code controls the slide transitions, auto-sliding, and user interactions:

const myslide = document.querySelectorAll('.myslide'),
   dot = document.querySelectorAll('.dot');
let counter = 1;
slidefun(counter);
let timer = setInterval(autoSlide, 8000);
function autoSlide() {
  counter += 1;
  slidefun(counter);
}
function plusSlides(n) {
  counter += n;
  slidefun(counter);
  resetTimer();
}
function currentSlide(n) {
  counter = n;
  slidefun(counter);
  resetTimer();
}
function resetTimer() {
  clearInterval(timer);
  timer = setInterval(autoSlide, 8000);
}
function slidefun(n) {
  let i;
  for(i = 0;i<myslide.length;i++){
    myslide[i].style.display = "none";
  }
  for(i = 0;i<dot.length;i++) {
    dot[i].className = dot[i].className.replace(' active', '');
  }
  if(n > myslide.length){
     counter = 1;
     }
  if(n < 1){
     counter = myslide.length;
     }
  myslide[counter - 1].style.display = "block";
  dot[counter - 1].className += " active";
}