Carrusel de Imágenes usando HTML, CSS y JavaScript ~ Tutorialazo

Read Time:4 Minute, 49 Second

¿Alguna vez has querido agregar un carrusel de imágenes a tu sitio web que no solo se vea moderno, sino que también tenga una transición suave y visualmente atractiva? Hoy te mostraré cómo crear un carrusel de imágenes interactivo con HTML, CSS, y JavaScript, donde las imágenes se desplazan con una animación elegante desde el lado derecho, y el texto junto con un botón aparece sobre la imagen con un bonito efecto.

Características del Carrusel:

Transición de las imágenes desde el lado derecho con un efecto suave.
Miniaturas clicables que permiten cambiar entre las imágenes.
Texto animado y botón interactivo que aparecen después de que la imagen se despliega.
Filtro de oscurecimiento que mejora la legibilidad del texto al aparecer sobre la imagen.

Código Completo

Aquí tienes el código completo que puedes copiar y pegar en tu proyecto.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="main-image">
            <img src="https://tutorialazo.com/wp-content/uploads/2024/10/Switzerland.png" alt="Main Image" id="mainImg">
            <div class="image-info">
                <h2 id="imageTitle">Switzerland</h2>
                <p id="imageDescription">A beautiful country with stunning landscapes.</p>
                <button id="actionButton">Learn More</button>
            </div>
        </div>

        <div class="overlay-images">
            <div class="item previous">
                <img src="https://tutorialazo.com/wp-content/uploads/2024/10/Finland.png" alt="Overlay Image">
            </div>
            <div class="item next">
                <img src="https://tutorialazo.com/wp-content/uploads/2024/10/Mountain.png" alt="Overlay Image">
            </div>
        </div>

    </div>
    <script src="script.js"></script>
</body>
</html>

CSS:

body {
    font-family: Arial, sans-serif;
    background-color: #333;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    position: relative;
    width: 80%;
    max-width: 1000px;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.main-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transform: translateX(100%); /* Imagen empieza fuera del contenedor */
    transition: transform 1.2s ease-in-out, filter 0.5s ease; /* Animación más suave con ease-in-out y filtro */
}

.main-image img.active {
    transform: translateX(0); /* Se desplaza a su posición original */
    filter: brightness(50%); /* Oscurecer la imagen cuando el texto esté visible */
}

.image-info {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    opacity: 0; /* Inicialmente invisible */
    transition: opacity 1s ease-in-out 0.3s; /* Aparece después de la imagen */
}

.image-info h2, .image-info p, .image-info button {
    margin: 10px 0;
}

.image-info h2 {
    font-size: 24px;
    color: #FF7F50;
}

.image-info p {
    font-size: 16px;
    color: #f0f0f0;
}

.image-info button {
    padding: 10px 20px;
    background-color: #FF7F50;
    border: none;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.image-info button:hover {
    background-color: #ff9b72;
}

/* Mostrar el contenedor de la información cuando la imagen está activa */
.main-image img.active + .image-info {
    opacity: 1;
}

.overlay-images {
    position: absolute;
    top: 50%;
    right: 5%;
    display: flex;
    flex-direction: row;
    transform: translateY(-50%);
}

.overlay-images .item {
    width: 120px;
    height: 200px; /* Alto de las miniaturas */
    margin: 10px 5px;
    opacity: 0.8;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.overlay-images .item img {
    width: 100%;
    height: 100%; /* Asegura que las imágenes ocupen todo el contenedor de 200px */
    border-radius: 10px;
    object-fit: cover;
}

.overlay-images .item:hover {
    transform: scale(1.1);
    opacity: 1;
}

JavaScript:

const mainImage = document.getElementById('mainImg');
const overlayItems = document.querySelectorAll('.overlay-images .item');
const imageTitle = document.getElementById('imageTitle');
const imageDescription = document.getElementById('imageDescription');

let images = [
    {
        src: "https://tutorialazo.com/wp-content/uploads/2024/10/Switzerland.png",
        title: "Switzerland",
        description: "A beautiful country with stunning landscapes."
    },
    {
        src: "https://tutorialazo.com/wp-content/uploads/2024/10/Finland.png",
        title: "Finland",
        description: "A land of forests, lakes and northern lights."
    },
    {
        src: "https://tutorialazo.com/wp-content/uploads/2024/10/Mountain.png",
        title: "Mountain",
        description: "Explore the majestic mountains with scenic views."
    }
];

let counter = 0;

// Función para actualizar la imagen principal y el contenido de la info
function updateMainImage() {
    mainImage.classList.remove('active'); // Quitar la clase activa antes del cambio
    setTimeout(() => {
        mainImage.src = images[counter].src; // Cambiar la imagen después de quitar la clase
        imageTitle.textContent = images[counter].title; // Actualizar el título
        imageDescription.textContent = images[counter].description; // Actualizar la descripción
        mainImage.classList.add('active'); // Volver a añadir la clase para el efecto
    }, 100); // Añadir un pequeño retraso para asegurar la transición
}

// Función para actualizar las miniaturas
function updateOverlayImages() {
    overlayItems.forEach((item, index) => {
        let overlayIndex = (counter + index + 1) % images.length;
        item.querySelector('img').src = images[overlayIndex].src;

        // Añadir el evento de clic a cada miniatura
        item.addEventListener('click', () => {
            counter = overlayIndex; // Cambia el índice principal al índice de la miniatura clicada
            updateMainImage(); // Actualiza la imagen principal con el efecto
            updateOverlayImages(); // Vuelve a actualizar las miniaturas para reflejar el nuevo estado
        });
    });
}

// Inicializar la imagen principal y las miniaturas
updateMainImage();
updateOverlayImages();

Cómo Funciona este Código:

Transiciones suaves: La imagen principal se desplaza desde el lado derecho con un efecto suave, y luego aparece un filtro oscuro para hacer más legible el texto sobre la imagen.
Miniaturas interactivas: Las miniaturas son clicables, lo que te permite navegar fácilmente entre las imágenes del carrusel.
Texto dinámico y botón: El título, la descripción y el botón se actualizan dinámicamente en función de la imagen seleccionada.

Personalización:

Puedes personalizar fácilmente este carrusel cambiando las imágenes, los textos, los estilos de los botones, o incluso el comportamiento de la animación. Además, puedes agregar más imágenes o reducir el número de miniaturas según tus necesidades.