Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Slider coursel
Slider coursel with indicators
Slider coursel with auto play

<h5 class="mt-4">Slider coursel</h5>
<div class="fui-carousel">
  <div class="fui-carousel-track">
    <div class="fui-carousel-item bg-gold fui-carousel-item-active">
      <div class="flex-center-center h-100 flex-column">
        <h1 class="display-1">Gold</h1>
      </div>
    </div>
    <div class="fui-carousel-item bg-primary">
      <div class="flex-center-center h-100 flex-column">
        <h1 class="display-1">Primary</h1>
      </div>
    </div>
    <div class="fui-carousel-item bg-secondary">
      <div class="flex-center-center h-100 flex-column">
        <h1 class="display-1">Secondary</h1>
      </div>
    </div>
    <div class="fui-carousel-item bg-warning">
      <div class="flex-center-center h-100 flex-column">
        <h1 class="display-1">Warning</h1>
      </div>
    </div>
  </div>

  <div class="fui-carousel-arrow fui-carousel-arrow-left"><i class="fa fa-angle-left"></i></div>
  <div class="fui-carousel-arrow fui-carousel-arrow-right"><i class="fa fa-angle-right"></i></div>
</div>

<h5 class="mt-4">Slider coursel with indicators</h5>
<div class="fui-carousel fui-carousel-indicate">
  <div class="fui-carousel-track">
    <div class="fui-carousel-item bg-primary fui-carousel-item-active">
      <div class="flex-center-center h-100 flex-column">
        <h1 class="display-1">1</h1>
      </div>
    </div>
    <div class="fui-carousel-item bg-gold">
      <div class="flex-center-center h-100 flex-column">
        <h1 class="display-1">2</h1>
      </div>
    </div>
    <div class="fui-carousel-item bg-secondary">
      <div class="flex-center-center h-100 flex-column">
        <h1 class="display-1">3</h1>
      </div>
    </div>
    <div class="fui-carousel-item bg-warning">
      <div class="flex-center-center h-100 flex-column">
        <h1 class="display-1">4</h1>
      </div>
    </div>
  </div>

  <div class="fui-carousel-arrow fui-carousel-arrow-left"><i class="fa fa-angle-left"></i></div>
  <div class="fui-carousel-arrow fui-carousel-arrow-right"><i class="fa fa-angle-right"></i></div>
</div>

<h5 class="mt-4">Slider coursel with auto play</h5>
<div class="fui-carousel fui-carousel-indicate fui-carousel-auto">
  <div class="fui-carousel-track">
    <div class="fui-carousel-item bg-secondary fui-carousel-item-active">
      <div class="flex-center-center h-100 flex-column">
        <h1 class="display-1">Famous UI</h1>
        <h3 class="text-white">Css framework</h3>
      </div>
    </div>

    <div class="fui-carousel-item bg-primary">
      <div class="flex-center-center h-100">
        <h3 class="text-white">Carousel</h3>
      </div>
    </div>

    <div class="fui-carousel-item bg-gold">
      <div class="flex-center-center h-100">
        <h3 class="text-white">With Auto Play</h3>
      </div>
    </div>

    <div class="fui-carousel-item bg-warning" style="background-image: url(https://picsum.photos/1200/820);">
      <div class="flex-center-center h-100">
        <h3 class="text-white">And Background Images</h3>
      </div>
    </div>

  </div>

  <div class="fui-carousel-arrow fui-carousel-arrow-left"><i class="fa fa-angle-left"></i></div>
  <div class="fui-carousel-arrow fui-carousel-arrow-right"><i class="fa fa-angle-right"></i></div>
</div>

<div class="fui-carousel fui-carousel-indicate fui-carousel-auto mt-4" style="height: 600px" id="carousel">
  <div class="fui-carousel-track">
    <div class="fui-carousel-item bg-secondary fui-carousel-item-active bg-cover" style="background-image: url(https://picsum.photos/1200/820);">
      <div class="d-flex fa-start fj-center flex-column h-100">
        <div class="fui-container">
          <h1 class="display-1">Famous UI</h1>
          <h3 class="text-white">Css framework</h3>
          <p class="bg-primary p-2 text-white">#1 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, voluptate.</p>
        </div>
      </div>
    </div>
    <div class="fui-carousel-item bg-primary bg-cover" style="background-image: url(https://picsum.photos/1200/800);">
      <div class="d-flex fa-start fj-center flex-column h-100">
        <div class="fui-container">
          <h1 class="display-1">Famous UI</h1>
          <h3 class="bg-secondary p-2 text-white d-inline-block">Css framework</h3>
          <p class="bg-primary p-2 text-white">#2 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, voluptate.</p>
        </div>
      </div>
    </div>
    <div class="fui-carousel-item bg-gold bg-cover" style="background-image: url(https://picsum.photos/1200/800);">
      <div class="d-flex fa-start fj-center flex-column h-100">
        <div class="fui-container">
          <h1 class="display-1">Famous UI</h1>
          <h3 class="bg-secondary p-2 text-white d-inline-block">Css framework</h3>
          <p class="bg-primary p-2 text-white">#3 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, voluptate.</p>
        </div>
      </div>
    </div>
    <div class="fui-carousel-item bg-warning bg-cover" style="background-image: url(https://picsum.photos/1200/800);">
      <div class="d-flex fa-start fj-center flex-column h-100">
        <div class="fui-container">
          <h1 class="display-1">Famous UI</h1>
          <h3 class="bg-secondary p-2 text-white d-inline-block">Css framework</h3>
          <p class="bg-primary p-2 text-white">#4 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, voluptate.</p>
        </div>
      </div>
    </div>
    <div class="fui-carousel-item bg-danger bg-cover" style="background-image: url(https://picsum.photos/1200/800);">
      <div class="d-flex fa-start fj-center flex-column h-100">
        <div class="fui-container">
          <h1 class="display-1">Famous UI</h1>
          <h3 class="bg-secondary p-2 text-white d-inline-block">Css framework</h3>
          <p class="bg-primary p-2 text-white">#5 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, voluptate.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="fui-carousel-arrow fui-carousel-arrow-left"><i class="fa fa-angle-left"></i></div>
  <div class="fui-carousel-arrow fui-carousel-arrow-right"><i class="fa fa-angle-right"></i></div>
</div>