Components and widgets
Boomerang info! Here are two ways of how you can use our carousels. You can combine any type of block or other element within carousel items.
Default carousel
<div class="carousel carousel-3 slide animate-hover-slide">
<div class="carousel-nav">
<a data-slide="prev" class="left" href="#carouselWork"><i class="fa fa-angle-left"></i></a>
<a data-slide="next" class="right" href="#carouselWork"><i class="fa fa-angle-right"></i></a>
</div>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-4">
<div class="wp-block inverse">
<div class="figure">
<img alt="" src="images/prv/wk-img-1.jpg" class="img-responsive">
<div class="figcaption bg-base"></div>
<div class="figcaption-btn">
<a href="images/prv/wk-img-1.jpg" class="btn btn-xs btn-b-white theater"><i class="fa fa-plus-circle"></i> Zoom</a>
<a href="#" class="btn btn-xs btn-b-white"><i class="fa fa-link"></i> View</a>
</div>
</div>
<div class="row">
<div class="col-xs-9">
<h2 class="text-left">Bootstrap template</h2>
<small>Brand creation</small>
</div>
<div class="col-xs-3">
<div class="like-button">
<span class="button liked">
<i class="fa fa-heart"></i>
</span>
<span class="count"><small>123</small></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="wp-block inverse">
<div class="figure">
<img alt="" src="images/prv/wk-img-2.jpg" class="img-responsive">
<div class="figcaption bg-base"></div>
<div class="figcaption-btn">
<a href="images/prv/wk-img-2.jpg" class="btn btn-xs btn-b-white theater"><i class="fa fa-plus-circle"></i> Zoom</a>
<a href="#" class="btn btn-xs btn-b-white"><i class="fa fa-link"></i> View</a>
</div>
</div>
<div class="row">
<div class="col-xs-9">
<h2>Bootstrap template</h2>
<small>Brand creation</small>
</div>
<div class="col-xs-3">
<div class="like-button">
<span class="button">
<i class="fa fa-heart"></i>
</span>
<span class="count"><small>123</small></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="wp-block inverse">
<div class="figure">
<img alt="" src="images/prv/wk-img-3.jpg" class="img-responsive">
<div class="figcaption bg-base"></div>
<div class="figcaption-btn">
<a href="images/prv/wk-img-3.jpg" class="btn btn-xs btn-b-white theater"><i class="fa fa-plus-circle"></i> Zoom</a>
<a href="#" class="btn btn-xs btn-b-white"><i class="fa fa-link"></i> View</a>
</div>
</div>
<div class="row">
<div class="col-xs-9">
<h2>Bootstrap template</h2>
<small>Brand creation</small>
</div>
<div class="col-xs-3">
<div class="like-button">
<span class="button liked">
<i class="fa fa-heart"></i>
</span>
<span class="count"><small>123</small></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-4">
<div class="wp-block inverse">
<div class="figure">
<img alt="" src="images/prv/wk-img-5.jpg" class="img-responsive">
<div class="figcaption bg-base"></div>
<div class="figcaption-btn">
<a href="images/prv/wk-img-5.jpg" class="btn btn-xs btn-b-white theater"><i class="fa fa-plus-circle"></i> Zoom</a>
<a href="#" class="btn btn-xs btn-b-white"><i class="fa fa-link"></i> View</a>
</div>
</div>
<div class="row">
<div class="col-xs-9">
<h2>Bootstrap template</h2>
<small>Brand creation</small>
</div>
<div class="col-xs-3">
<div class="like-button">
<span class="button">
<i class="fa fa-heart"></i>
</span>
<span class="count"><small>123</small></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="wp-block inverse">
<div class="figure">
<img alt="" src="images/prv/wk-img-6.jpg" class="img-responsive">
<div class="figcaption bg-base"></div>
<div class="figcaption-btn">
<a href="images/prv/wk-img-6.jpg" class="btn btn-xs btn-b-white theater"><i class="fa fa-plus-circle"></i> Zoom</a>
<a href="#" class="btn btn-xs btn-b-white"><i class="fa fa-link"></i> View</a>
</div>
</div>
<div class="row">
<div class="col-xs-9">
<h2>Bootstrap template</h2>
<small>Brand creation</small>
</div>
<div class="col-xs-3">
<div class="like-button">
<span class="button">
<i class="fa fa-heart"></i>
</span>
<span class="count"><small>123</small></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="wp-block inverse">
<div class="figure">
<img alt="" src="images/prv/wk-img-7.jpg" class="img-responsive">
<div class="figcaption bg-base"></div>
<div class="figcaption-btn">
<a href="images/prv/wk-img-7.jpg" class="btn btn-xs btn-b-white theater"><i class="fa fa-plus-circle"></i> Zoom</a>
<a href="#" class="btn btn-xs btn-b-white"><i class="fa fa-link"></i> View</a>
</div>
</div>
<div class="row">
<div class="col-xs-9">
<h2>Bootstrap template</h2>
<small>Brand creation</small>
</div>
<div class="col-xs-3">
<div class="like-button">
<span class="button">
<i class="fa fa-heart"></i>
</span>
<span class="count"><small>123</small></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Touch carousel with hover effect
Boomerang Alert! You can choose between 1 to 5 items per slide. See the table bellow
| Class name | Info |
|---|---|
| .owl-carousel-single | Use this if you want to show only one item per slider |
| .owl-carousel-2 | Use this if you want to show two items per slider |
| .owl-carousel-3 | use this if you want to show three items per slider |
| .owl-carousel-4 | use this if you want to show four items per slider |
| .owl-carousel-5 | use this if you want to show five items per slider |
Meredith GreyCEO
Meredith GreyCEO
Meredith GreyCEO
Meredith GreyCEO
Meredith GreyCEO
<div class="owl-carousel owl-carousel-3 animate-hover-slide-2">
<div class="item">
<div class="wp-block inverse">
<div class="figure">
<img alt="" src="images/prv/team/team-agency-1.jpg" class="img-responsive">
<div class="figcaption">
<h2>Meredith Grey<small>CEO</small></h2>
<ul class="social-icons text-center">
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="item">
<div class="wp-block inverse">
<div class="figure">
<img alt="" src="images/prv/team/team-agency-2.jpg" class="img-responsive">
<div class="figcaption">
<h2>Meredith Grey<small>CEO</small></h2>
<ul class="social-icons text-center">
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="item">
<div class="wp-block inverse">
<div class="figure">
<img alt="" src="images/prv/team/team-agency-3.jpg" class="img-responsive">
<div class="figcaption">
<h2>Meredith Grey<small>CEO</small></h2>
<ul class="social-icons text-center">
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="item">
<div class="wp-block inverse">
<div class="figure">
<img alt="" src="images/prv/team/team-agency-4.jpg" class="img-responsive">
<div class="figcaption">
<h2>Meredith Grey<small>CEO</small></h2>
<ul class="social-icons text-center">
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="item">
<div class="wp-block inverse">
<div class="figure">
<img alt="" src="images/prv/team/team-agency-3.jpg" class="img-responsive">
<div class="figcaption">
<h2>Meredith Grey<small>CEO</small></h2>
<ul class="social-icons text-center">
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>