Web Development

Build a Modern carousel using HTML CSS+Bootstrap and JavaScript

In this web development tutorial we are going to build a completely responsive modern auto sliding carousel using HTML5 CSS3 Bootstrap 5 and JavaScript.

Code for this video:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" href="style.css" />
    <title>Modern carousel</title>
  </head>
  <body>
    <div class="container mt-5">
      <!--todo: title -->
      <h1 class="display-1 text-center mb-5">modern carousel</h1>
      <!-- todo: main container -->
      <main class="row row-cols-sm-2 row-cols-1 m-auto">
        <!-- todo: carousel -->
        <div id="Carousel" class="carousel col">
          <div class="carousel-inner rounded-2 shadow">
            <div class="carousel-item">
              <img
                src="https://source.unsplash.com/SWGnzdIRQuU"
                alt="..."
                class="d-block w-100"
              />
            </div>
            <div class="carousel-item">
              <img
                src="https://source.unsplash.com/6FbArnPXEVg"
                alt="..."
                class="d-block w-100"
              />
            </div>
            <div class="carousel-item">
              <img
                src="https://source.unsplash.com/z3em1GBRhvY"
                alt="..."
                class="d-block w-100"
              />
            </div>
            <div class="carousel-item">
              <img
                src="https://source.unsplash.com/zUNs99PGDg0"
                alt="..."
                class="d-block w-100"
              />
            </div>
            <div class="carousel-item">
              <img
                src="https://source.unsplash.com/n49BjsFf5dI"
                alt="..."
                class="d-block w-100"
              />
            </div>
          </div>
          <!-- todo: carousel controllers -->
          <button class="carousel-control-prev">
            <span class="carousel-control-prev-icon"></span>
          </button>

          <button class="carousel-control-next">
            <span class="carousel-control-next-icon"></span>
          </button>
        </div>
        <!-- todo: captions -->
        <ul id="captions" class="list-unstyled col">
          <li
            class="cap cap-active fs-3 p-3 my-3 rounded-2"
            onclick="capSlide(0)"
          >
            <b>Accelerate your ideas</b> with premium templates
          </li>
          <li class="cap fs-3 p-3 my-3 rounded-2" onclick="capSlide(1)">
            <b>Work faster and more</b> professionally by inviting your team to
            work together
          </li>
          <li class="cap fs-3 p-3 my-3 rounded-2" onclick="capSlide(2)">
            <b>Take designs to the next level</b> with animation, video, and
            audio
          </li>
          <li class="cap fs-3 p-3 my-3 rounded-2" onclick="capSlide(3)">
            <b>Market your business</b> with branding tools and merchandise
          </li>
          <li class="cap fs-3 p-3 my-3 rounded-2" onclick="capSlide(4)">
            <b>Reach your audience</b> with social campaigns, supported by
            content scheduling
          </li>
        </ul>
      </main>
    </div>

    <script src="main.js"></script>
  </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;400&display=swap");

body {
  font-family: "Poppins", sans-serif;
}

/* .carousel-item {
  display: block;
} */
.cap:hover {
  cursor: pointer;
  background-color: #f8f9f9;
}
.cap:active {
  border-bottom: 2px solid #7d2ae8;
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1);
}

.cap-active {
  position: relative;
  background-color: #f8f9f9;
}
.cap-active b {
  color: #7d2ae8;
}
.cap-active::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #7d2ae8;
  width: 0%;
  animation: linierRight 4.5s linear forwards;
}

@keyframes linierRight {
  form {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.carousel-item {
  animation: fade 3s ease;
}

@keyframes fade {
  0% {
    opacity: 0.1;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
  }
}

JS

document.querySelector(".carousel-control-prev").onclick = () => plusSlide(-1);
document.querySelector(".carousel-control-next").onclick = () => plusSlide(1);

const slides = document.querySelectorAll(".carousel-item");
const caps = document.querySelectorAll(".cap");

// console.log(slides, caps);

let slideIndex = 1;

function plusSlide(n) {
  showSlides((slideIndex += n));
}
function showSlides(n) {
  let i;

  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";
}

let time = 1500;

let carouselLoop;

function autoLoopCarousel() {
  carouselLoop = setInterval(() => {
    plusSlide(1);
  }, time * 3);
}

window.onload = () => {
  showSlides(slideIndex);
  autoLoopCarousel();
  capCycle();
  loopCaps();
};

function addClass(element, time) {
  setTimeout(() => {
    element.classList.add("cap-active");
  }, time);
}
function removeClass(element, time) {
  setTimeout(() => {
    element.classList.remove("cap-active");
  }, time);
}

const capCycle = () => {
  addClass(caps[0]);
  removeClass(caps[0], time * 3);
  addClass(caps[1], time * 3);
  removeClass(caps[1], time * 6);
  addClass(caps[2], time * 6);
  removeClass(caps[2], time * 9);
  addClass(caps[3], time * 9);
  removeClass(caps[3], time * 12);
  addClass(caps[4], time * 12);
  removeClass(caps[4], time * 15);
};

let capLoop;
function loopCaps() {
  capLoop = setInterval(capCycle, time * 15);
}

function capSlide(n) {
  showSlides((slideIndex = n));
}

Become a web development !

Check out my other courses on Web Development :

2 comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: