Elements
These modular elements can be readily used and customized across pages and in different blocks.
Home Owl Carousel <> show code
<div class="owl-carousel carousel-style-one" id="activeCarousel">
<div class="carousel-item bg-image" style="background-image:url(../img/home-page/backgrounds/home-slide-1.jpg)">
<div class="carousel-description text-left">
<h1 class="" >Carousel Slider <br> Main Title goes here</h1>
<p class="" >The real place of Mindfullness & Healthy body</p>
<a href="#" class="btn btn-primary btn-default" >More Details</a>
</div>
</div>
<div class="carousel-item bg-image" style="background-image:url(..)">
<div class="carousel-description text-left">
...
</div>
</div>
<div class="carousel-item bg-image" style="background-image:url(..)">
<div class="carousel-description text-left">
...
</div>
</div>
</div>
How to use
- Be sure to set a unique Id on the #activeCarousel for optional controls, especially if you’re using multiple carousels on a single page.
- To get the same styling give the whole carousel wrapper .carousel-style-one class
- To show description on the slider image use .carousel-description and wrap all contents in it
- For the middle/right aligned caption, use .text-center or .text-right with .carousel-caption
Example:
Right place
to begin your business
The real place of Mindfullness & Healthy body
Right place
to begin your business
The real place of Mindfullness & Healthy body
Right place
to begin your business
The real place of Mindfullness & Healthy body
Service Owl Carousel <> show code
<div class="owl-carousel service-carousel" id="service-carousel">
<div class="info service-info slider-inner bg-ebony hover-primary">
<div class="icon">
</div>
<div class="description color-white">
<a href="service-details-left-sidebar.html">
<h3>Financial Support</h3>
</a>
<p>There are many variations of passa lorem Ipsum available but the ma</p>
</div>
</div>
How to use
- Be sure to set a unique Id on the #service-carousel for optional controls, especially if you’re using multiple carousels on a single page.
- To get the same styling give the whole carousel wrapper .service-carousel class
Example:
Testimonial Owl carousel <> show code
<div class="row">
<div class="col-12 col-md-9 m-auto">
<div class="owl-carousel testimonial-carousel mb-0">
<div class="testimonial-slide text-center" data-dot="<img src='img/small-imges/client-1.jpg'>" >
<p>Lorem ipsum dolor sit amet constur adipisicing elit sed do eiusmtempor incid et dolore magna aliqu enim minim veniam quis nostrud exercittion ullamco laboris nisi ut aliquip excepteur sint occaecat cuidatat non proident sunt in culpaqui officia. </p>
<h4 class="client-name">Julia Robertson</h4>
<span class="client-status">Happy Client</span>
</div>
<div class="testimonial-slide text-center" data-dot="<img src='img/small-imges/client-2.jpg'>" >
<p>...</p>
<h4 class="client-name">...</h4>
<span class="client-status">...</span>
</div>
<div class="testimonial-slide text-center" data-dot="<img src='img/small-imges/client-3.jpg'>" >
<p>...</p>
<h4 class="client-name">...</h4>
<span class="client-status">...</span>
</div>
</div>
</div>
</div>
How to use
Here are some instructions to use this carousel:
- use class .testimonial-carousel with .owl-carousel
- For the image size shown in example use .client-img
- .img-circle class is used to circle image
Example
Brand Owl carousel <> show code
<div class="brand-section bg-ghost-white pv50">
<div class="owl-carousel brand-carousel" id="brands">
<div class="single-brand">
<img src="../img/home-page/brand-logos/brand-1.png" alt="">
</div>
<div class="single-brand">
<img src="..." alt="">
</div>
<div class="single-brand">
<img src="..." alt="">
</div>
<div class="single-brand">
<img src="..." alt="">
</div>
<div class="single-brand">
<img src="..." alt="">
</div>
</div>
</div>
How to use
Here are some instructions to use brand Owl carousel:
- This carousel slider works using jquery Owl Carousel
- Set a unique id in the main wrapper div which will work as a hook to call the Owl object in jquery like #brands in the code below
$('#brands').owlCarousel({
loop:true,
dots:false,
autoPlay: true,// Autoplay on/off,
items:4, // Number of slides to show
margin:10, // Number of slides to scroll
});
Example
