Banner carrusel en tu tienda

Campos por diapositiva

Estos valores se guardan en la configuración de la tienda y el motor genera el marcado que espera el componente (imagen con carga diferida mediante data-src y data-thumb).

Ejemplos de HTML superpuesto (opcional)

Vende Fácil inserta este fragmento dentro de cada diapositiva, justo después del enlace e imagen (igual que en la demo del plugin). Puedes usar encabezados (<h1>–<h4>), <div>, enlaces o botones. La posición suele controlarse con style (top, left, right) y las animaciones con data-transition, data-effect-out o data-transition-out, según el caso. Los siguientes bloques están adaptados del archivo de referencia banner-rotator-4.1.2/index.html.

1) Varios títulos en secuencia (efectos flipUp / flipDown / spinInRight)

<h3 data-transition="flipUp 500 linear" data-effect-out="flipDown"
    style="top:30px;left:30px;background:#000;width:auto;height:auto;letter-spacing:12px;padding:5px 0 5px 20px;color:#fff;">
    Oferta
</h3>
<h3 data-transition="flipDown 500 linear 400" data-effect-out="flipUp"
    style="top:95px;left:30px;background:#000;width:auto;height:auto;letter-spacing:12px;padding:5px 0 5px 20px;color:#fff;">
    temporada
</h3>
<h3 data-transition="flipUp 500 linear 800" data-effect-out="flipDown"
    style="top:160px;left:30px;background:#000;width:auto;height:auto;letter-spacing:12px;padding:5px 0 5px 20px;color:#fff;">
    envío gratis
</h3>
<h3 data-transition="spinInRight 500 linear 1200" data-effect-out="spinOutRight"
    style="top:225px;left:30px;background:#000;width:auto;height:auto;letter-spacing:12px;padding:5px 0 5px 20px;color:#fff;">
    2026
</h3>

2) Título principal + franja inferior (transición de entrada y salida distinta)

<h1 data-transition="slideDown 500 swing 0" data-effect-out="slideDown"
    style="top:145px;left:20px;width:auto;height:auto;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,0.2);">
    Tu mensaje principal
</h1>
<h3 data-transition="flipDown 500 swing 0" data-transition-out="flipDown 500 swing 1000"
    style="top:215px;left:25px;width:auto;height:auto;background:#00ccff;background:rgba(0,204,255,0.95);padding:5px 15px;color:#fff;">
    Línea destacada
</h3>

3) Cajas con zoom y sombra (estilo demo “photo3”)

<h1 data-transition="zoomIn 500 swing 0" data-effect-out="fade"
    style="top:40px;right:25px;width:auto;height:auto;background:#0e65d5;box-shadow:0 0 3px rgba(0,0,0,.75);padding:10px;color:#fff;">
    Encabezado
</h1>
<h4 data-transition="zoomIn 500 swing 400" data-effect-out="fade"
    style="top:110px;right:45px;width:auto;height:auto;background:#fff;color:#333;box-shadow:0 0 3px rgba(0,0,0,.75);padding:10px;">
    Subtítulo uno
</h4>
<h4 data-transition="zoomIn 500 swing 800" data-effect-out="fade"
    style="top:160px;right:65px;width:auto;height:auto;background:#fff;color:#333;box-shadow:0 0 3px rgba(0,0,0,.75);padding:10px;">
    Subtítulo dos
</h4>

4) Bloque de texto en <div> (panel lateral con párrafos)

<div data-effect="moveRight" data-effect-out="moveLeft"
    style="top:0;left:0;width:245px;height:auto;min-height:200px;padding:15px;font-size:16px;color:#fff;background:#000;background:rgba(0,0,0,0.75)">
    <p><strong>Texto promocional breve.</strong></p>
    <p class="mb-0">Detalle o condiciones en una o dos líneas.</p>
</div>

5) Botón como capa (enlace estilizado)

<a href="https://ejemplo.com/promo" target="_blank" rel="noopener"
    class="btn btn-primary rounded-pill"
    data-effect="moveUp" data-effect-out="moveDown"
    style="top:225px;left:30px;width:auto;height:auto;">Ver promoción</a>

Sustituye la URL del href por la de tu campaña o déjalo vacío si el clic debe seguir el Enlace opcional de la diapositiva (según cómo configures la tienda). Los nombres de efectos (flipUp, zoomIn, slideDown, etc.) deben coincidir con los que admite el rotador.

Opciones del carrusel (panel)

Corresponden a las opciones públicas del plugin. En Vende Fácil puedes definir las que aparecen en el formulario; el resto usa los valores por defecto del componente.

El listado completo de opciones del script (retardo, autoplay, transiciones, capas, eventos, métodos) forma parte de la API del componente embebido; en la tienda pública no necesitas cargar scripts a mano: Vende Fácil los inyecta al renderizar el carrusel.

Efectos y capas

El rotador admite múltiples efectos de transición entre imágenes (fundidos, cortinas, rejillas, etc.) y capas de texto o HTML con animaciones de entrada y salida. Para el HTML superpuesto, cada capa puede llevar atributos como data-transition y data-effect-out según la sintaxis del plugin.

Si no necesitas animaciones complejas, basta con imagen + enlace; el efecto entre diapositivas lo controla el campo Efecto de diapositiva.

Buenas prácticas

• Usa imágenes optimizadas (peso razonable) y URLs https estables.
• Prueba en móvil: el ancho del carrusel se ajusta al contenedor de la tienda.
• Si el banner no se ve, comprueba que {{banner}} esté en el HTML, que el banner esté activado y que haya al menos una diapositiva con URL de imagen válida en modo carrusel.