Componentes

Escala tus ventas

Flujos de trabajo avanzados, cadencias y funciones sin código te ayudan a vender y escalar el negocio de manera eficaz.

MÁS INFORMACIÓN
Diapositiva 1 de 3
Apariencia
Comportamiento
Diapositivas 3
Slide 1
Contenido
CTA
Media
Slide 2
Contenido
CTA
Media
Slide 3
Contenido
CTA
Media
Configuración JSON
{
  "slides": [
    {
      "id": 1,
      "title": "Escala\ntus ventas",
      "description": "Flujos de trabajo avanzados, cadencias y funciones sin código te ayudan a vender y escalar el negocio de manera eficaz.",
      "ctaText": "MÁS INFORMACIÓN",
      "ctaHref": "#",
      "mediaType": "image",
      "mediaSrc": "",
      "mediaAlt": "Plataforma de ventas"
    },
    {
      "id": 2,
      "title": "Automatiza\ntu soporte",
      "description": "Respuestas inteligentes, enrutamiento automático y análisis predictivo para ofrecer un soporte al cliente excepcional.",
      "ctaText": "DESCUBRIR",
      "ctaHref": "#",
      "mediaType": "image",
      "mediaSrc": "",
      "mediaAlt": "Automatización de soporte"
    },
    {
      "id": 3,
      "title": "Analiza\ntus datos",
      "description": "Dashboards personalizables, informes en tiempo real y métricas clave que impulsan decisiones basadas en datos.",
      "ctaText": "VER MÁS",
      "ctaHref": "#",
      "mediaType": "image",
      "mediaSrc": "",
      "mediaAlt": "Análisis de datos"
    }
  ],
  "bgColor": "#f0ece4"
}

Slider Promocional 01

SliderPromocional01.vue

Slider/carousel de contenido promocional con diseño editorial en dos columnas. Columna izquierda para texto (título, descripción, CTA) y columna derecha para media (imagen o vídeo en modo cover). Incluye navegación por flechas, dots, autoplay configurable y cuatro tipos de transición.

slidercarouselheromediaresponsive

Props

PropTipoDefaultDescripción
slidesSlideItem[][...3 slides]Array de diapositivas con contenido textual y media.
modelValuenumber0Índice activo (v-model compatible). Controla la slide visible.
autoplaybooleantrueActiva el avance automático entre slides.
autoplayDelaynumber5000Intervalo de autoplay en milisegundos.
loopbooleantruePermite navegar en bucle infinito.
transitionTypeTransitionType'crossfade'Tipo de transición: fade, crossfade, slide, push, cover, zoom, kenBurns, blur, flip, cube, swing, tilt.
bgColorstring'transparent'Color de fondo detrás del slider. Acepta cualquier valor CSS de color.
borderRadiusnumber20Border radius en px de la tarjeta del slider.
showArrowsbooleantrueMuestra flechas de navegación laterales.
showDotsbooleantrueMuestra indicadores dot de navegación inferior.
pauseOnHoverbooleantruePausa el autoplay al pasar el ratón sobre el slider.
maxWidthstring'100%'Ancho máximo del contenedor base del slider. Por defecto ocupa el 100% del padre.
sliderWidthstring'50%'Ancho del viewport (tarjeta) del slider dentro del contenedor.

Interfaz SlideItem

interface SlideItem {
  id: string | number     // Identificador único de la diapositiva
  title: string           // Título principal (soporta \n para saltos de línea)
  description: string     // Texto descriptivo
  ctaText?: string        // Texto del CTA (si vacío, no se muestra)
  ctaHref?: string        // Enlace del CTA
  mediaType: 'image' | 'video'  // Tipo de contenido visual
  mediaSrc: string        // URL de la imagen o vídeo
  mediaAlt?: string       // Texto alternativo (solo imágenes)
  poster?: string         // URL del poster (solo vídeos)
  mediaPosition?: 'left' | 'right'  // Posición de la media (default: 'right')
}

Notas

  • Cada diapositiva se divide en dos columnas: texto (izquierda) y media (derecha).
  • La media acepta imágenes y vídeos con object-fit: cover para llenar el área visual.
  • Si no se proporciona mediaSrc, se muestra un fallback decorativo con gradiente y mockup SVG.
  • Los vídeos se reproducen en autoplay silencioso (muted, loop, playsinline).
  • Transiciones disponibles: slide (desplazamiento), fade (fundido), crossfade (cruce suave), zoom (escala + opacidad).
  • Navegación por teclado: flechas izquierda/derecha para cambiar de slide.
  • El componente es SSR-friendly: el autoplay se inicia en onMounted tras un requestAnimationFrame.
  • Completamente responsive: dos columnas en desktop, apilado vertical en móvil.
  • Soporta v-model para controlar el índice activo desde el componente padre.

Ejemplo de uso

<SliderPromocional01
  :slides="[
    {
      id: 1,
      title: 'Escala\ntus ventas',
      description: 'Flujos de trabajo avanzados para escalar tu negocio.',
      ctaText: 'MÁS INFORMACIÓN',
      ctaHref: 'https://example.com',
      mediaType: 'image',
      mediaSrc: '/images/sales-hero.jpg',
      mediaAlt: 'Plataforma de ventas',
    },
    {
      id: 2,
      title: 'Automatiza\ntu soporte',
      description: 'Respuestas inteligentes y análisis predictivo.',
      ctaText: 'DESCUBRIR',
      ctaHref: '/soporte',
      mediaType: 'video',
      mediaSrc: '/videos/support-demo.mp4',
      poster: '/images/support-poster.jpg',
    },
  ]"
  :autoplay="true"
  :autoplay-delay="5000"
  :loop="true"
  transition-type="crossfade"
  :show-arrows="true"
  :show-dots="true"
  :pause-on-hover="true"
/>