Carousel

Un componente de presentación de diapositivas para recorrer elementos (imágenes o diapositivas de texto) como un carrusel.

Carousel Completo

Con navegación, controles,paginación e intervalo.Para el intervalo se utiliza el atributo [data-interval="milisegundos"]

<div class="row">
    <div class="col-sm-12">
      <div class="carousel mb-5" style="height: 300px">
        <div class="carousel__container" data-toggle="carousel" data-interval="6000">
          <div class="carousel__item carousel__active">
            <div class="carousel__content" style="background-color: #3f51b5;">
              <div class="flex jc--center ai--center w-100 h-100 us-none">
                <h1 class="text-white text-lg">SLIDER 5</h1>
              </div>
            </div>
          </div>
          <div class="carousel__item">
            <div class="carousel__content" style="background-color: slateblue;">
              <div class="flex jc--center ai--center w-100 h-100 us-none">
                <h1 class="text-white text-lg">SLIDER 6</h1>
              </div>
            </div>
          </div>
          <div class="carousel__item">
            <div class="carousel__content" style="background-color: #c2185b;">
              <div class="flex jc--center ai--center w-100 h-100 us-none">
                <h1 class="text-white text-lg">SLIDER 7</h1>
              </div>
            </div>
          </div>
          <div class="carousel__item">
            <div class="carousel__content" style="background-color: teal;">
              <div class="flex jc--center ai--center w-100 h-100 us-none">
                <h1 class="text-white text-lg">SLIDER 8</h1>
              </div>
            </div>
          </div>
        </div>

        <div class="carousel__prev ripple" data-toggle="carousel_prev"></div>
        <div class="carousel__next ripple" data-toggle="carousel_next"></div>

        <div class="carousel__controls" data-toggle="carousel_controls">
          <button class="carousel__pagination ripple"></button>
          <button class="carousel__pagination ripple"></button>
          <button class="carousel__pagination ripple"></button>
          <button class="carousel__pagination ripple"></button>
        </div>

      </div>
    </div>
</div>

Carousel solo con paginación

Solo con los botones next y prev, pero puede tener un intervalo

<div class="row">
    <div class="col-sm-12">
      <div class="carousel mb-5" style="height: 300px">
        <div class="carousel__container" data-toggle="carousel">
          <div class="carousel__item carousel__active">
            <div class="carousel__content" style="background-color: #3f51b5;">
              <div class="flex jc--center ai--center w-100 h-100 us-none">
                <h1 class="text-white text-lg">SLIDER 5</h1>
              </div>
            </div>
          </div>
          <div class="carousel__item">
            <div class="carousel__content" style="background-color: slateblue;">
              <div class="flex jc--center ai--center w-100 h-100 us-none">
                <h1 class="text-white text-lg">SLIDER 6</h1>
              </div>
            </div>
          </div>
          <div class="carousel__item">
            <div class="carousel__content" style="background-color: #c2185b;">
              <div class="flex jc--center ai--center w-100 h-100 us-none">
                <h1 class="text-white text-lg">SLIDER 7</h1>
              </div>
            </div>
          </div>
          <div class="carousel__item">
            <div class="carousel__content" style="background-color: teal;">
              <div class="flex jc--center ai--center w-100 h-100 us-none">
                <h1 class="text-white text-lg">SLIDER 8</h1>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel__prev ripple" data-toggle="carousel_prev"></div>
        <div class="carousel__next ripple" data-toggle="carousel_next"></div>   
      </div>
    </div>
</div>
               

Carousel solo con controles

Solo controles, pero puede tener un intervalo(data-interval="intervalo")

<div class="row">
    <div class="col-sm-12">
      <div class="carousel mb-5" style="height: 300px">
        <div class="carousel__container" data-toggle="carousel">
          <div class="carousel__item carousel__active">
            <div class="carousel__content" style="background-color: #3f51b5;">
              <div class="flex jc--center ai--center w-100 h-100 us-none">
                <h1 class="text-white text-lg">SLIDER 5</h1>
              </div>
            </div>
          </div>
          <div class="carousel__item">
            <div class="carousel__content" style="background-color: slateblue;">
              <div class="flex jc--center ai--center w-100 h-100 us-none">
                <h1 class="text-white text-lg">SLIDER 6</h1>
              </div>
            </div>
          </div>
          <div class="carousel__item">
            <div class="carousel__content" style="background-color: #c2185b;">
              <div class="flex jc--center ai--center w-100 h-100 us-none">
                <h1 class="text-white text-lg">SLIDER 7</h1>
              </div>
            </div>
          </div>
          <div class="carousel__item">
            <div class="carousel__content" style="background-color: teal;">
              <div class="flex jc--center ai--center w-100 h-100 us-none">
                <h1 class="text-white text-lg">SLIDER 8</h1>
              </div>
            </div>
          </div>
        </div>
        
        <div class="carousel__controls" data-toggle="carousel_controls">
          <button class="carousel__pagination ripple"></button>
          <button class="carousel__pagination ripple"></button>
          <button class="carousel__pagination ripple"></button>
          <button class="carousel__pagination ripple"></button>
        </div>
        
      </div>
    </div>
</div>
                 

Carousel solo

Solo con el evento touch y un intervalo([data-interval="milisegundos"])

<div class="row">
  <div class="col-sm-12">
    <div class="carousel mb-5" style="height: 300px">
      <div class="carousel__container" data-toggle="carousel" data-interval="5000">
        <div class="carousel__item carousel__active">
          <div class="carousel__content" style="background-color: #3f51b5;">
            <div class="flex jc--center ai--center w-100 h-100 us-none">
              <h1 class="text-white text-lg">SLIDER 5</h1>
            </div>
          </div>
        </div>
        <div class="carousel__item">
          <div class="carousel__content" style="background-color: slateblue;">
            <div class="flex jc--center ai--center w-100 h-100 us-none">
              <h1 class="text-white text-lg">SLIDER 6</h1>
            </div>
          </div>
        </div>
        <div class="carousel__item">
          <div class="carousel__content" style="background-color: #c2185b;">
            <div class="flex jc--center ai--center w-100 h-100 us-none">
              <h1 class="text-white text-lg">SLIDER 7</h1>
            </div>
          </div>
        </div>
        <div class="carousel__item">
          <div class="carousel__content" style="background-color: teal;">
            <div class="flex jc--center ai--center w-100 h-100 us-none">
              <h1 class="text-white text-lg">SLIDER 8</h1>
            </div>
          </div>
        </div>
      </div> 
    </div>
  </div>
</div>