How to make a carousel in html

Learn how to create a carousel in HTML with this simple step-by-step guide, complete with example code.

Creating a carousel in HTML is a great way to showcase multiple images or content in a visually appealing and interactive manner. In this article, I will guide you through the process of creating a basic carousel using HTML, CSS, and JavaScript.

HTML Structure

First, let's start by setting up the HTML structure for our carousel. We will use a container element to hold the carousel items and navigation buttons.

<div class="carousel">
  <div class="carousel-items">
    <div class="item">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="item">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="item">
      <img src="image3.jpg" alt="Image 3">
    </div>
  </div>
  <button class="prev" onclick="prevSlide()">Prev</button>
  <button class="next" onclick="nextSlide()">Next</button>
</div>

CSS Styling

Now, let's add some CSS to style our carousel. We will position the carousel items and create a basic slide effect.

.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-items {
  display: flex;
}

.item {
  flex: 0 0 100%;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #333;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

JavaScript Functionality

Finally, let's add some JavaScript to enable the sliding functionality of our carousel. We will create functions to move the carousel items left and right.

let slideIndex = 0;

function showSlides() {
  let slides = document.querySelectorAll('.item');
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none';
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = 'block';
}

function prevSlide() {
  slideIndex--;
  showSlides();
}

function nextSlide() {
  slideIndex++;
  showSlides();
}

showSlides();

With this HTML, CSS, and JavaScript in place, you now have a basic carousel set up on your website. Feel free to customize the styles and functionality to suit your specific needs.