How To Create Carousel Like Instagram Using HTML CSS and JavaScript

Hi guys I am back with another fantastic project in this project I created a carousel slider using HTML, CSS & JavaScript.

I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them for free.

Carousels

A carousel post is a type of post on social media that allows you to share multiple images or videos in a single post. This can be a great way to tell a story, showcase products, or provide step-by-step instructions.

Carousel posts are available on many different social media platforms, including Instagram, Facebook, and LinkedIn.

The number of images or videos that you can include in a carousel post varies by platform. For example, Instagram allows you to include up to 10 images or videos in a carousel post, while Facebook only allows you to include up to 9.

About This Project

This project was created by the codingpakistan team to help students learn coding and programming in a simple way. If you want to join our team please follow us on Instagram.

Created by	Coding Pakistan
Languages	HTML / CSS / JS
Source Code	Available Below
Preview	Take Preview

How to Create a Carousel Slider

There are some steps to create this type of Carousel Slider using HTML, CSS, and JavaScript that are given below.

The first step is to create one folder.
Open this folder in Vs Code Editor and create three files in HTML, CSS, and JavaScript.

Make sure the HTML file extension is (.html), the CSS file extension is (.css) and the JavaScript file extension is (.js)
After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
The last step is copying and pasting the given code into your files.

NOTE: I use some free stock car images from Pexels that you can download from Pexels and change the path in your code.

Carousel Slider – Source Code

HTML FILE

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Banner 2</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section>
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide swiper-slide--one">
            <div>
              <h2>1 Series</h2>
              <a>explore</a>
            </div>
          </div>
          <div class="swiper-slide swiper-slide--two">
            <div>
              <h2>2 Series</h2>
              <a>explore</a>
            </div>
          </div>
          <div class="swiper-slide swiper-slide--three">
            <div>
              <h2>3 Series</h2>
              <a>explore</a>
            </div>
          </div>
          <div class="swiper-slide swiper-slide--four">
            <div>
              <h2>4 Series</h2>
              <a>explore</a>
            </div>
          </div>

          <div class="swiper-slide swiper-slide--five">
            <div>
              <h2>5 Series</h2>
              <a>explore</a>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

CSS FILE

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Euclid Circular A", "Poppins";
}

body {
  background: #16222a; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #3a6073,
    #16222a
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #3a6073,
    #16222a
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

section {
  position: relative;
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 0 50px;
  min-height: 100vh;
  max-width: 90vw;
  margin: 0 auto;
}

section a {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  color: #717171;
  font-weight: 500;
  background: #fff;
  border-radius: 3.125rem;
  margin: 0 auto;
  padding: 6px 26px;
  font-size: 0.9rem;
  transition: 0.3s ease-in-out;
}

.swiper {
  width: 100%;
}

.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
  background: #fff;
}

.swiper-pagination {
  bottom: 34px !important;
  transform: scale(1.3);
}

.swiper-slide {
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  padding: 0 0 80px;
  filter: grayscale(0.6);
}

.swiper-slide h2 {
  color: #fff;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.4;
  margin-bottom: 0.625rem;
  text-transform: uppercase;
  text-align: center;
}

.swiper-slide a:hover {
  color: #005baa;
}

.swiper-slide div {
  transition: 0.25s;
  opacity: 0;
}

.swiper-slide-active div {
  opacity: 1;
}

.swiper-slide--one {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("1.jpg") no-repeat 50% 50% / cover;
}

.swiper-slide--two {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("2.jpg") no-repeat 50% 50% / cover;
}

.swiper-slide--three {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("3.jpg") no-repeat 50% 50% / cover;
}

.swiper-slide--four {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("7.jpg") no-repeat 50% 50% / cover;
}

.swiper-slide--five {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("6.jpg") no-repeat 50% 50% / cover;
}

.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right {
  background-image: none;
}

JavaScript FILE

var swiper = new Swiper(".swiper", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 2,
  speed: 600,
  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 100,
    modifier: 3,
    slideShadows: true,
  },
  loop: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: false,
  },
});

Conclusion and Final Words

In this blog post, we have discussed how to create carousels like Instagram using HTML, CSS, and JavaScript. We have covered the basic steps involved in creating a carousel, as well as some tips for designing effective carousels.

To create a carousel, you will need to:

Create the HTML markup for the carousel. This will include the slides, the navigation controls, and the JavaScript code.
Style the carousel using CSS. This will determine the look and feel of the carousel.

Add JavaScript code to the carousel to make it interactive. This will allow users to scroll through the slides, click on the navigation controls, and other actions.

How To Create Carousels Like Instagram Using HTML CSS and JavaScript