Skip to main content

Create a Stunning Carousel Slider with JavaScript and CSS

· 4 min read
Skill Upwards

"Create a Stunning Carousel Slider with JavaScript and CSS"

Introduction​

A carousel slider is a popular component used to display a series of images or content in a rotating fashion.

In this blog article, we'll guide you through the process of building a simple and stylish carousel slider using JavaScript and CSS.

You'll learn how to create a responsive and interactive slider that transitions smoothly between slides.

We'll also show you how to add navigation buttons to the slider and how to make the slider automatically rotate through the slides.

Suggested Tutorials 📑:​

Let's get started! (❁´◡`❁)

1. HTML Structure​

Start by setting up the basic HTML structure for your carousel slider. Create a container to hold the slides and navigation buttons.


<!DOCTYPE html>
<html>
<head>
  <title>Carousel Slider</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="carousel-container">
    <div class="carousel">
      <div class="slide">
        <img src="image1.jpg" alt="Slide 1">
      </div>
      <div class="slide">
        <img src="image2.jpg" alt="Slide 2">
      </div>
      <div class="slide">
        <img src="image3.jpg" alt="Slide 3">
      </div>
    </div>
    <button class="prev-button">&#10094;</button>
    <button class="next-button">&#10095;</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

2. CSS Styling​

Create a styles.css file to style the carousel and slides.


body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.carousel-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
   overflow: hidden;

}

.carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
}

img {
  max-width: 100%;
  height: auto;
}

.prev-button,
.next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.prev-button {
  left: 10px;
}

.next-button {
  right: 10px;
}

Suggested Tutorials 📑:​

3. JavaScript Functionality​

Create a script.js file to add functionality to the carousel slider.

const carousel = document.querySelector('.carousel');
const slides = document.querySelectorAll('.slide');
const prevButton = document.querySelector('.prev-button');
const nextButton = document.querySelector('.next-button');

let currentIndex = 0;

// Function to show the current slide
function showSlide(index) {
  carousel.style.transform = `translateX(-${index * 100}%)`;
}

// Event listeners for prev and next buttons
prevButton.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  showSlide(currentIndex);
});

nextButton.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
});

// Initial slide
showSlide(currentIndex);

4. Making It Responsive​

To make the carousel slider responsive, add media queries to adjust the slide layout based on screen size.


@media screen and (max-width: 768px) {
  .slide {
    flex: 0 0 100%;
  }
}

@media screen and (max-width: 480px) {
  .carousel-container {
    max-width: 100%;
  }
}

Suggested Tutorials 📑:​

Conclusion​

Congratulations! 🥳 You've successfully built a responsive carousel slider using JavaScript and CSS.

We hope you enjoyed this tutorial and found it useful.

Happy coding! 😊