#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>