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