Building an Image Carousel By Using HTML, CSS & JS

webdev4us June 08, 2024


Building the HTML Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Carousel 3</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="swiper js">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          style="background-image: url('img1.jpg')"
        ></div>
        <div
          class="swiper-slide"
          style="background-image: url('img2.jpg')"
        ></div>
        <div
          class="swiper-slide"
          style="background-image: url('img3.jpg')"
        ></div>
        <div
          class="swiper-slide"
          style="background-image: url('img4.jpg')"
        ></div>
        <div
          class="swiper-slide"
          style="background-image: url('img5.jpg')"
        ></div>
        <div
          class="swiper-slide"
          style="background-image: url('img6.jpg')"
        ></div>
        <div
          class="swiper-slide"
          style="background-image: url('img7.jpg')"
        ></div>
        <div
          class="swiper-slide"
          style="background-image: url('img8.jpg')"
        ></div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>


Styling with CSS

body {
  background: #b7a89f;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 350px;
  height: 350px;
}
#page2 {
  height: 50vw;
}


JavaScript Code

 
var swiper = new Swiper(".swiper", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 3,
  speed: 600,
  coverflowEffect: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows: true,
  },
  loop: true,
});
webdev4us

Posted by webdev4us

Post a Comment

0 Comments