<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

	<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

	<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
	});

								

• To get the same styling give the whole carousel wrapper .brand_carousel class

	<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
  	});
  
  								

	<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
  	});
  
  								

  to disable dots change the dots: value true to false.