#1 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, voluptate.
#2 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, voluptate.
#3 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, voluptate.
#4 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, voluptate.
#5 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, voluptate.
<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>