Crear un carrusel de artículos usando HTML + CSS y Javascript

by
Tiempo de lectura: 2 minutos

Reading Time: 2 minutes

In this tutorial, I will guide you through the steps to create an item carousel using HTML, CSS, and JavaScript.

Step 1: HTML Structure

We’ll start by creating the basic structure of the carousel in the HTML file. Here’s a simple example of what it could look like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Item Carousel</title>
</head>
<body>
  <div class="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="image1.jpg" alt="Item 1">
        <h3>Item 1</h3>
        <p>Item 1 description...</p>
      </div>
      <div class="carousel-item">
        <img src="image2.jpg" alt="Item 2">
        <h3>Item 2</h3>
        <p>Item 2 description...</p>
      </div>
      <!-- Add more carousel items as needed -->
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Step 2: CSS Styles

Now, we’ll create the CSS styles to make the carousel visually appealing. Adjust the styles to match your preferences and design:

/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.carousel {
  width: 80%;
  margin: auto;
  overflow: hidden;
  position: relative;
}

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

.carousel-item {
  flex: 0 0 100%;
  text-align: center;
  padding: 20px;
}

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

h3 {
  margin: 10px 0;
}

p {
  color: #666;
}

Step 3: JavaScript Functionality

Finally, we’ll add the carousel functionality using JavaScript to enable navigation between items:

// script.js
const carouselInner = document.querySelector('.carousel-inner');
const carouselItems = document.querySelectorAll('.carousel-item');

let currentIndex = 0;

function showSlide(index) {
  carouselInner.style.transform = `translateX(-${index * 100}%)`;
}

function setActiveClass(index) {
  carouselItems.forEach((item, i) => {
    item.classList.toggle('active', i === index);
  });
}

function nextSlide() {
  currentIndex = (currentIndex + 1) % carouselItems.length;
  showSlide(currentIndex);
  setActiveClass(currentIndex);
}

function prevSlide() {
  currentIndex = (currentIndex - 1 + carouselItems.length) % carouselItems.length;
  showSlide(currentIndex);
  setActiveClass(currentIndex);
}

setActiveClass(currentIndex);

// Event listeners for next and previous buttons
document.querySelector('.next-btn').addEventListener('click', nextSlide);
document.querySelector('.prev-btn').addEventListener('click', prevSlide);

Remember to replace "image1.jpg" and "image2.jpg" with the correct paths to your images.

With these three steps, you’ll have created a fully functional item carousel using HTML, CSS, and JavaScript. You can further customize the styles and functionality to suit your needs and preferences. Have fun experimenting and enhancing your carousel!

Post Views: 5

Leave a Comment