Elements
These modular elements can be readily used and customized across pages and in different blocks.
Bootstrap Default Carousel <> show code
<div id="carousel-example-generic b-carousel-v1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic b-carousel-v1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic b-carousel-v1" data-slide-to="1"></li>
<li data-target="#carousel-example-generic b-carousel-v1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="..." alt="First slide">
<div class="carousel-caption text-center">
<h1 class=" " data-animation="animated zoomIn" data-delay="0.3s">Carousel Slider <br> Main Title goes here</h1>
<p class=" " data-animation="animated zoomIn" data-delay="0.5s">The real place of Mindfullness & Healthy body</p>
<a href="#" class="btn btn-primary btn-default " data-animation="animated zoomIn" data-delay="0.7s">More Details</a>
</div>
</div>
<div class="carousel-item">
<img src="..." alt="Second slide">
<div class="carousel-caption text-center">
...
</div>
</div>
<div class="carousel-item">
<img src="..." alt="Third slide">
<div class="carousel-caption text-center">
...
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic b-carousel-v1" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic b-carousel-v1" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
<span class="sr-only">Next</span>
</a>
</div>
How to use
- Be sure to set a unique id on the .carousel for optional controls, especially if you’re using multiple carousels on a single page.
- To show captions on the slider image use .carousel-caption and wrap all contents in it
- To animate text using animate.css requires data-animation=" " attribute in the animating element and any animating classname with .animated in it
- animation delay of element can be controlled using data-delay=" " attribute.
- For the middle aligned caption, use .text-center with .carousel-caption
Example
Another Example
Testimonial bootstrap carousel <> show code
<div id="testimonial-carousel" class="carousel testimonial-carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testimonial-carousel" data-slide-to="0" class="active"></li>
<li data-target="#testimonial-carousel" data-slide-to="1"></li>
<li data-target="#testimonial-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item row justify-content-center active">
<div class="ml-auto col-sm-10 text-center">
<div class="client-img img-circle">
<img src="..." alt="client">
</div>
<p>
...
</p>
<h5>Jermey Ann</h5>
<span class="text-primary">Designer</span>
</div>
</div>
<div class="carousel-item">
...
</div>
<div class="carousel-item">
...
</div>
</div>
</div>
How to use
Here are some instructions to use this carousel:
- use class .testimonial-carousel with .carousel
- For the image size shown in example use .client-img
- .img-circle class is used to circle image
Example
Brand slick carousel <> show code
<div class="brand_carousel bg-primary">
<div id="brands" class="carousel_row">
<div class="brand_single">
<div class="brand_img">
<img src="..." alt="">
</div>
</div>
<div class="brand_single">
<div class="brand_img">
<img src="..." alt="">
</div>
</div>
<div class="brand_single">
<div class="brand_img">
<img src="..." alt="">
</div>
</div>
<div class="brand_single">
<div class="brand_img">
<img src="..." alt="">
</div>
</div>
<div class="brand_single">
<div class="brand_img">
<img src="..." alt="">
</div>
</div>
</div>
</div>
How to use
Here are some instructions to use brand slick carousel:
- This carousel slider works using jquery slick slider
- Set a unique id in the main wrapper div which will work as a hook to call the slick object in jquery like #brands in the code below
$('#brands').slick({
slidesToShow: 3, // Number of slides to show
slidesToScroll: 1 // Number of slides to scroll
});
Example








Image slick carousel <> show code
<div class="image_carousel">
<div id="image" class="element_row">
<div class="image_single">
<div class="card_img">
<img class="img-full" src="..." alt="Card image">
</div>
</div>
<div class="image_single">
<div class="card_img">
<img class="img-full" src="..." alt="Card image">
</div>
</div>
<div class="image_single">
<div class="card_img">
<img class="img-full" src="..." alt="Card image">
</div>
</div>
<div class="image_single">
<div class="card_img">
<img class="img-full" src="..." alt="Card image">
</div>
</div>
<div class="image_single">
<div class="card_img">
<img class="img-full" src="..." alt="Card image">
</div>
</div>
</div>
</div>
How to use
Here are some instructions to use Image slick carousel:
- This carousel slider works using jquery slick slider
- The .arrow-shade is used for different arrow style
- Set a unique id in the main wrapper div which will work as a hook to call the slick object in jquery as like #image in the code below
$('#image').slick({ slidesToShow: 3, // Number of slides to show slidesToScroll: 1, // Number of slides to scroll arrows: true // set navigation arrows to show });
Example








Card slick carousel <> show code
<div class="product-carousel">
<div id="card" class="element_row">
<div class="card product-card">
<div class="card_img">
<img class="img-full" src="assets/img/gallery/g1.jpg" alt="Card image">
<div class="hover-overlay effect-transformY">
<a href="" class="overlay_icon left"><i class="fa fa-eye"></i></a>
</div>
</div>
<div class="card-block">
<a href="#"><h4 class="card-title">Card Title Here</h4></a>
<span class="text-primary">$50card subtitle;/span>
</div>
</div>
<div class="card product-card">
<div class="card_img">
<img class="img-full" src="..." alt="Card image">
</div>
</div>
<div class="card product-card">
<div class="card_img">
<img class="img-full" src="..." alt="Card image">
</div>
</div>
<div class="card product-card">
<div class="card_img">
<img class="img-full" src="..." alt="Card image">
</div>
</div>
<div class="card product-card">
<div class="card_img">
<img class="img-full" src="..." alt="Card image">
</div>
</div>
<div class="card product-card">
<div class="card_img">
<img class="img-full" src="..." alt="Card image">
</div>
</div>
<div class="card product-card">
<div class="card_img">
<img class="img-full" src="..." alt="Card image">
</div>
</div>
<div class="card product-card">
<div class="card_img">
<img class="img-full" src="..." alt="Card image">
</div>
</div>
</div>
</div>
How to use
Here are some instructions to use Card carousel:
- This carousel slider works using jquery slick slider
- The .card is used for each single slide element. put any content into it
- Set a unique id in the main wrapper div which will work as a hook to call the slick object in jquery as like #card in the code below
$('#card').slick({ slidesToShow: 3, // Number of slides to show slidesToScroll: 1, // Number of slides to scroll arrows: false // set navigation arrows not to show dots: true // Set dots to show });
Example

Card Title Here
card subtitle
Card Title Here
card subtitle
Card Title Here
card subtitle
Card Title Here
card subtitle
Card Title Here
card subtitle
Card Title Here
card subtitle
Card Title Here
card subtitle