Ir al contenido
English

Navegar

English

Escribe para buscar. Pulsa Escape para cerrar.

    Componentes · js

    Carrusel (carousel)

    Un pase de diapositivas construido sobre una lista. El servidor envía las diapositivas en un carril con desplazamiento horizontal y ajuste (scroll-snap), puntos que son enlaces de ancla y botones ocultos; eso ya funciona en cualquier navegador. En init los puntos pasan a ser pestañas, las diapositivas paneles, los botones aparecen y el carril se mueve por transformaciones: deslizamiento con leyenda en paralaje, fundido cruzado, o un modo cinema que acerca lentamente el medio activo. El autoplay dibuja una barra de progreso, se pausa al pasar el puntero, al enfocar y cuando la pestaña del navegador se oculta, y nunca arranca si la persona prefiere reducir el movimiento.

    CSS: css/components/carousel.css (en ivolt.css). JS: @intervolutions/ivolt/carousel o auto.js. Añadido en la v0.3.

    Un pase que funciona sin JavaScriptfixtures/carousel/basic.htmlAbrir sola — Un pase que funciona sin JavaScript
    <section class="iv-carousel" data-iv-component="carousel" aria-roledescription="carousel" aria-label="Sample work. The four projects below are made up for this demo.">
  <div class="iv-carousel__viewport">
    <ul class="iv-carousel__track">
      <li class="iv-carousel__slide" id="cw-aurora">
        <figure class="iv-carousel__media">
          <svg role="img" aria-label="Abstract artwork: a green glow rising behind two long arcs on a dark green field." viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice">
            <defs>
              <linearGradient id="cw-a1" x1="0" y1="0" x2="1600" y2="900" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#094D63"/><stop offset=".6" stop-color="#04070F"/><stop offset="1" stop-color="#0C1330"/>
              </linearGradient>
              <radialGradient id="cw-a2" cx="420" cy="620" r="700" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#73DFFF" stop-opacity=".65"/><stop offset="1" stop-color="#73DFFF" stop-opacity="0"/>
              </radialGradient>
            </defs>
            <rect width="1600" height="900" fill="url(#cw-a1)"/>
            <rect width="1600" height="900" fill="url(#cw-a2)"/>
            <circle cx="1230" cy="240" r="190" fill="#2266D8" fill-opacity=".38"/>
            <path d="M-60 560C320 300 660 760 1660 340" fill="none" stroke="#66B1FF" stroke-opacity=".55" stroke-width="4"/>
            <path d="M-60 660C360 430 720 880 1660 460" fill="none" stroke="#73DFFF" stroke-opacity=".3" stroke-width="10"/>
          </svg>
        </figure>
        <span class="iv-carousel__scrim" aria-hidden="true"></span>
        <div class="iv-carousel__caption">
          <span class="iv-badge iv-badge--primary iv-badge--solid">Case study</span>
          <h3>Aurora energy dashboard</h3>
          <p>A control room for a fictional grid operator, built with iVOLT tokens, layout primitives and no runtime dependencies.</p>
        </div>
      </li>
      <li class="iv-carousel__slide" id="cw-harbour">
        <figure class="iv-carousel__media">
          <svg role="img" aria-label="Abstract artwork: blue bands crossing a dark field with a soft green halo." viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice">
            <defs>
              <linearGradient id="cw-b1" x1="1600" y1="0" x2="0" y2="900" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#0C1330"/><stop offset=".5" stop-color="#04070F"/><stop offset="1" stop-color="#171A45"/>
              </linearGradient>
              <radialGradient id="cw-b2" cx="1180" cy="300" r="640" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#2266D8" stop-opacity=".75"/><stop offset="1" stop-color="#2266D8" stop-opacity="0"/>
              </radialGradient>
            </defs>
            <rect width="1600" height="900" fill="url(#cw-b1)"/>
            <rect width="1600" height="900" fill="url(#cw-b2)"/>
            <path d="M0 620 1600 380 1600 520 0 760Z" fill="#8B95FF" fill-opacity=".2"/>
            <path d="M0 700 1600 460 1600 500 0 740Z" fill="#66B1FF" fill-opacity=".35"/>
            <circle cx="360" cy="250" r="140" fill="#8B95FF" fill-opacity=".3"/>
          </svg>
        </figure>
        <span class="iv-carousel__scrim" aria-hidden="true"></span>
        <div class="iv-carousel__caption">
          <span class="iv-badge iv-badge--primary iv-badge--solid">Field report</span>
          <h3>Harbour logistics board</h3>
          <p>Sample data only: berths, tides and crane slots on one dense table that still reads on a phone.</p>
        </div>
      </li>
      <li class="iv-carousel__slide" id="cw-kit">
        <figure class="iv-carousel__media">
          <svg role="img" aria-label="Abstract artwork: concentric green rings over a deep carbon background." viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice">
            <defs>
              <linearGradient id="cw-c1" x1="0" y1="900" x2="1600" y2="0" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#04070F"/><stop offset="1" stop-color="#172F7A"/>
              </linearGradient>
            </defs>
            <rect width="1600" height="900" fill="url(#cw-c1)"/>
            <circle cx="820" cy="470" r="420" fill="none" stroke="#66B1FF" stroke-opacity=".5" stroke-width="3"/>
            <circle cx="820" cy="470" r="300" fill="none" stroke="#66B1FF" stroke-opacity=".35" stroke-width="6"/>
            <circle cx="820" cy="470" r="170" fill="#66B1FF" fill-opacity=".22"/>
            <path d="M-40 840C420 700 560 220 1640 120" fill="none" stroke="#66B1FF" stroke-opacity=".45" stroke-width="4"/>
          </svg>
        </figure>
        <span class="iv-carousel__scrim" aria-hidden="true"></span>
        <div class="iv-carousel__caption">
          <span class="iv-badge iv-badge--primary iv-badge--solid">Product</span>
          <h3>Voltage design kit</h3>
          <p>Every surface in this made-up kit is a token: change one value and the whole slideshow follows.</p>
        </div>
      </li>
      <li class="iv-carousel__slide" id="cw-tidal">
        <figure class="iv-carousel__media">
          <svg role="img" aria-label="Abstract artwork: a wide green wave breaking across a dark blue horizon." viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice">
            <defs>
              <linearGradient id="cw-d1" x1="0" y1="0" x2="0" y2="900" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#0C1330"/>
              </linearGradient>
              <radialGradient id="cw-d2" cx="760" cy="880" r="760" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#8FE3FF" stop-opacity=".55"/><stop offset="1" stop-color="#8FE3FF" stop-opacity="0"/>
              </radialGradient>
            </defs>
            <rect width="1600" height="900" fill="url(#cw-d1)"/>
            <path d="M-40 500C400 340 700 700 1640 400L1640 900-40 900Z" fill="#2266D8" fill-opacity=".45"/>
            <rect width="1600" height="900" fill="url(#cw-d2)"/>
            <circle cx="1320" cy="180" r="110" fill="#FBBF24" fill-opacity=".3"/>
          </svg>
        </figure>
        <span class="iv-carousel__scrim" aria-hidden="true"></span>
        <div class="iv-carousel__caption">
          <span class="iv-badge iv-badge--primary iv-badge--solid">Research</span>
          <h3>Tidal turbine telemetry</h3>
          <p>Invented readings from an imaginary estuary, plotted with nothing but CSS gradients and inline SVG.</p>
        </div>
      </li>
    </ul>
  </div>
  <nav class="iv-carousel__dots" aria-label="Slides">
    <a href="#cw-aurora"><span class="iv-u-sr-only">Slide 1: Aurora energy dashboard</span></a>
    <a href="#cw-harbour"><span class="iv-u-sr-only">Slide 2: Harbour logistics board</span></a>
    <a href="#cw-kit"><span class="iv-u-sr-only">Slide 3: Voltage design kit</span></a>
    <a href="#cw-tidal"><span class="iv-u-sr-only">Slide 4: Tidal turbine telemetry</span></a>
  </nav>
  <div class="iv-carousel__controls">
    <button class="iv-button iv-carousel__prev" type="button" aria-label="Previous slide" hidden>&#8592;</button>
    <button class="iv-button iv-carousel__next" type="button" aria-label="Next slide" hidden>&#8594;</button>
  </div>
</section>

    Efecto cinema con autoplay

    data-iv-effect="cinema" funde las diapositivas y añade un zoom lento sobre el medio activo mientras la leyenda sube. Con data-iv-autoplay el componente añade un contador grande y una barra de progreso que se rellena durante el intervalo; el botón de reproducir/pausar expone su estado con aria-pressed.

    Miniaturas

    Da a los puntos la clase iv-carousel__dots--thumbs y pon una imagen pequeña en cada ancla: se convierten en pestañas con miniatura. Este ejemplo usa el efecto fade.

    Con fotografías

    Imágenes reales de Unsplash (acreditadas en las leyendas), efecto cinema y autoplay de siete segundos. Las imágenes viven con la documentación, no en el paquete.

    Opciones

    OpciónAtributoPor defectoEfecto
    effectdata-iv-effectslideslide, fade o cinema.
    autoplaydata-iv-autoplay0Milisegundos entre diapositivas; 0 desactiva el autoplay. Nunca arranca con movimiento reducido.
    loopdata-iv-looptrueContinúa por el otro extremo al llegar al final.
    pauseOnHoverdata-iv-pause-on-hovertruePausa el autoplay mientras el puntero está sobre el carrusel.
    swipedata-iv-swipetrueArrastrar con el puntero cambia de diapositiva (umbral de 40 px).
    durationdata-iv-duration600Duración de la transición en milisegundos.
    pauseText, playTextdata-iv-pause-text, data-iv-play-textPause, PlayTextos del botón de pausa y reproducción.

    Métodos y eventos

    next(), prev(), goTo(index), play(), pause(), destroy(); lectura de index, count, isPlaying y slides. Eventos en el elemento raíz: iv:change (cancelable, detail.index, previousIndex, reason) y después iv:changed; iv:play e iv:pause con un reason.

    Teclado, gestos y tecnología asistiva

    Izquierda y derecha cambian de diapositiva desde las pestañas o desde el visor, Inicio y Fin saltan a los extremos, Enter y Espacio activan una pestaña. Arrastrar con el puntero cambia de diapositiva. El marcado sigue el patrón de carrusel por pestañas: cada diapositiva es un panel llamado «n of N», las no visibles quedan inertes en los efectos fade y cinema, y el visor solo es una región viva mientras el autoplay está en pausa, para no interrumpir la lectura con cada cambio.

    Sin JavaScript

    El carril se desplaza horizontalmente y se ajusta a cada diapositiva, los puntos son enlaces de ancla que llevan la diapositiva a la vista y los botones quedan ocultos. Las leyendas van sobre un degradado para que el texto se lea sobre cualquier medio.

    Errores frecuentes

    • Medios sin texto alternativo ni aria-label: cada diapositiva necesita un nombre.
    • Autoplay en un carrusel con enlaces y formularios dentro: quien lo lee pierde el sitio. Mejor navegación manual o un intervalo largo.
    • Usar el carrusel para contenido esencial: nada importante debería existir solo en la cuarta diapositiva.

    Índice de clases

    Partes y modificadores de esta familia que los ejemplos de arriba no muestran. La lista completa por hoja está en la referencia.

    ClaseQué hace
    iv-carousel__scrimDegradado sobre la diapositiva para que un pie siga siendo legible sobre cualquier fotografía; lo genera init cuando el carrusel lleva pies.