Carrusel Principal

El carrusel se inicia con el atributo data-carousel en el elemento .uc-carousel, siendo el valor de data-carousel, la clase del elemento hijo donde irá el contenido.

Actualización (21/10/2022): Por motivos de SEO se ha reemplazado la propiedad css background-image por un tag <img /> con clase .carousel-img en todos los carruseles

Actualización (02/12/2022): Esta es una nueva sección que incluye el Carrusel principal y los nuevos Carrusel principal con card y Carrusel principal centrado. El componente Carrusel de cards se ha dejado en una sección independiente del Kit.

Carrusel de encabezado

Es el carrusel principal del sitio. Por lo tanto, debe usarse utilizarse solo una vez en el sitio, en la página de inicio, debajo del header. El estilo y comportamiento de este carrusel no debe ser modificado, pero sí se puede modificar el tipo de información que se incluye (por ejemplo, podría quitarse el Tag UC).

Las imagenes del carrusel principal estan con su punto focal a la derecha, pero este puede ser cambiado añadiendo alguna de estas clases modificadoras:

carousel-img--focus-center
carousel-img--focus-left

Como alternativa al carrusel principal, se puede utilizar el componente Hero, que consiste en un solo ítem destacado al mismo tiempo.

Carrusel principal

Ejemplo:

Cargando ...

<div
  class="uc-carousel"
  data-carousel="uc-primary-carousel"
  data-type="carousel"
  data-items="1"
  data-slideby="1"
  data-loop="true"
  data-nav="true"
  data-autoplay="true"
  data-controls="false"
  data-navcontainer="#carousel-nav"
  data-autoplaybutton="#carousel-autoplay"
  data-autoplay-text="true"
>
  <!-- los atributos data-carousel, data-prev-button y data-next-button deben ser clases únicas 
      (seguidas de .prev/.next en el caso de los controles), si se repiten en el DOM puede 
      ocasionar errores cuando hay mas de un carousel-->
  <div class="uc-primary-carousel">
    <div
      class="primary-carousel_item uc-card card-bg--image card-gradient--bottom-black card-radius--none card-border--none"
    >
      <img
        class="carousel-img"
        src="https://dummyimage.com/1440x508/e0e0e0/b8b8b8.jpg"
        alt="Dummy image"
      />
      <div class="primary-carousel_item-content">
        <div class="container mt-auto">
          <div class="row">
            <div class="col-lg-7">
              <a href="#" class="uc-tag">Tag UC</a>
              <div class="h1 color-white">Slide #1</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="primary-carousel_item uc-card card-bg--image card-gradient--bottom-black card-radius--none card-border--none"
    >
      <img
        class="carousel-img carousel-img--focus-center"
        src="https://dummyimage.com/1440x508/e0e0e0/b8b8b8.jpg"
        alt="Dummy image"
      />
      <div class="primary-carousel_item-content">
        <div class="container mt-auto">
          <div class="row">
            <div class="col-lg-7">
              <a href="#" class="uc-tag">Tag UC</a>
              <div class="h1 color-white">Slide #2</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="primary-carousel_item uc-card card-bg--image card-gradient--bottom-black card-radius--none card-border--none"
    >
      <img
        class="carousel-img carousel-img--focus-left"
        src="https://dummyimage.com/1440x508/e0e0e0/b8b8b8.jpg"
        alt="Dummy image"
      />
      <div class="primary-carousel_item-content">
        <div class="container mt-auto">
          <div class="row">
            <div class="col-lg-7">
              <a href="#" class="uc-tag">Tag UC</a>
              <div class="h1 color-white">Slide #3</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="uc-carousel-nav primary-carousel-nav">
    <div class="container">
      <div class="carousel-nav-container">
        <ul class="carousel-nav-list" id="carousel-nav">
          <li class="carousel-nav-item">
            <div class="number">01</div>
            <div class="indicator"></div>
          </li>
          <li class="carousel-nav-item">
            <div class="number">02</div>
            <div class="indicator"></div>
          </li>
          <li class="carousel-nav-item">
            <div class="number">03</div>
            <div class="indicator"></div>
          </li>
        </ul>
        <div class="autoplay-buttons" id="carousel-autoplay"></div>
      </div>
    </div>
  </div>
</div>