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

por
Tiempo de lectura: 2 minutos

En este tutorial, te guiaré a través de los pasos para crear un carrusel de artículos utilizando HTML, CSS y JavaScript.

Paso 1: Estructura HTML

Comenzaremos creando la estructura básica del carrusel en el archivo HTML. Aquí tienes un ejemplo simple de cómo podría verse:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Carrusel de Artículos</title>
</head>
<body>
  <div class="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="imagen1.jpg" alt="Artículo 1">
        <h3>Artículo 1</h3>
        <p>Descripción del artículo 1...</p>
      </div>
      <div class="carousel-item">
        <img src="imagen2.jpg" alt="Artículo 2">
        <h3>Artículo 2</h3>
        <p>Descripción del artículo 2...</p>
      </div>
      <!-- Agrega más elementos de carrusel según sea necesario -->
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Paso 2: Estilos CSS

Ahora, crearemos los estilos CSS para darle vida al carrusel. Ajusta los estilos según tus preferencias y diseño:

/* 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;
}

Paso 3: Funcionalidad JavaScript

Finalmente, agregaremos la funcionalidad del carrusel utilizando JavaScript para permitir la navegación entre los artículos:

// 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);

// Controladores de eventos para los botones de siguiente y anterior
document.querySelector('.next-btn').addEventListener('click', nextSlide);
document.querySelector('.prev-btn').addEventListener('click', prevSlide);

Post Views: 168

Deja un comentario