Implementar un carrusel de imágenes personalizado en aplicaciones web permite un mayor control sobre la experiencia de usuario y el rendimiento visual. En este artículo, exploraremos cómo construir un componente de rotación de imágenes utilizando Vue 3, gestionando transiciones suaves y controles interactivos.

1. Estructura de Datos y Gestión de Imágenes

Para gestionar las diapositivas, definimos un arreglo reactivo que contenga las rutas de los recursos. Es fundamental considerar el origen de las imágenes: si se utilizan archivos locales en un entorno de desarrollo con Vite o Webpack, es recomendable usar rutas absolutas o importar los recursos dinámicamente para evitar errores de resolución.

const galeriaFotos = [
  '/assets/banner-01.jpg',
  '/assets/banner-02.jpg',
  '/assets/banner-03.jpg'
];

2. Lógica de Cambio de Diapositivas

En lugar de depender exclusivamente de manipulación directa del DOM, aprovechamos la reactividad de Vue para controlar el índice actual. Sin embargo, para efectos de animación específicos como el desvanecimiento manual, podemos interactuar con la referencia del elemento imagen.

import { ref } from 'vue';

const indiceActivo = ref(0);
const referenciaImagen = ref(null);

const actualizarDiapositiva = (direccion) => {
  // Cálculo del nuevo índice circular
  const total = galeriaFotos.length;
  indiceActivo.value = (indiceActivo.value + direccion + total) % total;

  // Aplicación de efecto de transición (Fade)
  if (referenciaImagen.value) {
    referenciaImagen.value.style.opacity = 0;
    
    setTimeout(() => {
      referenciaImagen.value.src = galeriaFotos[indiceActivo.value];
      referenciaImagen.value.style.opacity = 1;
    }, 400);
  }
};

3. Inetrfaz de Usuario y Controles

El diseño del carrusel requiere un contenedor posicionado de forma relativa para albergar las flechas de navegación y los indicadores. Utilizaremos componentes de iconos (como los de Element Plus o cualquier librería SVG) para las acciones de "Anterior" y "Siguiente".

<template>
  <div class="contenedor-slider" @mouseenter="mostrarFlechas = true" @mouseleave="mostrarFlechas = false">
    <!-- Imagen Principal -->
    <img 
      ref="referenciaImagen" 
      :src="galeriaFotos[indiceActivo]" 
      class="visualizador-img" 
      alt="Carrusel"
    />

    <!-- Botones de Navegación -->
    <button v-show="mostrarFlechas" class="btn-control prev" @click="actualizarDiapositiva(-1)">
      <el-icon><ArrowLeft /></el-icon>
    </button>
    
    <button v-show="mostrarFlechas" class="btn-control next" @click="actualizarDiapositiva(1)">
      <el-icon><ArrowRight /></el-icon>
    </button>
  </div>
</template>

4. Estilización y Animación con CSS

Para lograr un acabado profesional, aplicamos estilos que gestionen la visibilidad de los controles y la suavidad de la transición de la imagen. El uso de transition en CSS es vital para que el cambio de opacidad sea fluido.

<style scoped>
.contenedor-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 450px;
}

.visualizador-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out;
}

.btn-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  border: none;
  border-radius: 50%;
  color: white;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.prev { left: 20px; }
.next { right: 20px; }

.btn-control:hover {
  background: rgba(0, 0, 0, 0.6);
}
</style>

Este anfoque combina la potencia de la reactividad de Vue 3 con técnicas tradicionales de animación para crear un componente versátil y ligero, evitando la dependencia de librerías extrenas pesadas cuando solo se requiere un comportamiento personalizado.