CAROUSEL
Fade
<!-- controlls-over = navigation buttons over the image buttons-autohide = navigation buttons visible on mouse hover only data-plugin-options: "singleItem": true "autoPlay": true (or ms. eg: 4000) "navigation": true "pagination": true "transitionStyle":"fadeUp" (fade,backSlide,goDown,fadeUp) --> <div class="owl-carousel buttons-autohide controlls-over" data-plugin-options='{"singleItem": true, "autoPlay": true, "navigation": true, "pagination": true, "transitionStyle":"fade"}'> <div> <img class="img-responsive" src="assets/images/demo/1200x800/5-min.jpg" alt=""> </div> <div> <img class="img-responsive" src="assets/images/demo/1200x800/6-min.jpg" alt=""> </div> <div> <img class="img-responsive" src="assets/images/demo/1200x800/7-min.jpg" alt=""> </div> </div>
Back Slide
<div class="owl-carousel buttons-autohide controlls-over" data-plugin-options='{"singleItem": true, "autoPlay": true, "navigation": true, "pagination": true, "transitionStyle":"backSlide"}'>
<div>
<img class="img-responsive" src="assets/images/demo/1200x800/8-min.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="assets/images/demo/1200x800/9-min.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="assets/images/demo/1200x800/10-min.jpg" alt="">
</div>
</div>
Go Down
<!-- controlls-over = navigation buttons over the image buttons-autohide = navigation buttons visible on mouse hover only data-plugin-options: "singleItem": true "autoPlay": true (or ms. eg: 4000) "navigation": true "pagination": true "transitionStyle":"fadeUp" (fade,backSlide,goDown,fadeUp) --> <div class="owl-carousel buttons-autohide controlls-over" data-plugin-options='{"singleItem": true, "autoPlay": true, "navigation": true, "pagination": true, "transitionStyle":"goDown"}'> <div> <img class="img-responsive" src="assets/images/demo/1200x800/11-min.jpg" alt=""> </div> <div> <img class="img-responsive" src="assets/images/demo/1200x800/12-min.jpg" alt=""> </div> <div> <img class="img-responsive" src="assets/images/demo/1200x800/13-min.jpg" alt=""> </div> </div>
Fade Up
<!-- controlls-over = navigation buttons over the image buttons-autohide = navigation buttons visible on mouse hover only data-plugin-options: "singleItem": true "autoPlay": true (or ms. eg: 4000) "navigation": true "pagination": true "transitionStyle":"fadeUp" (fade,backSlide,goDown,fadeUp) --> <div class="owl-carousel buttons-autohide controlls-over" data-plugin-options='{"singleItem": true, "autoPlay": true, "navigation": true, "pagination": true, "transitionStyle":"fadeUp"}'> <div> <img class="img-responsive" src="assets/images/demo/1200x800/16-min.jpg" alt=""> </div> <div> <img class="img-responsive" src="assets/images/demo/1200x800/17-min.jpg" alt=""> </div> <div> <img class="img-responsive" src="assets/images/demo/1200x800/18-min.jpg" alt=""> </div> </div>
Brands Carousel
<!--
controlls-over = navigation buttons over the image
buttons-autohide = navigation buttons visible on mouse hover only
data-plugin-options:
"singleItem": true
"autoPlay": true (or ms. eg: 4000)
"navigation": true
"pagination": true
-->
<div class="text-center margin-top-30 margin-bottom-30">
<div class="owl-carousel nomargin" data-plugin-options='{"singleItem": false, "autoPlay": true}'>
<div>
<img class="img-responsive" src="assets/images/demo/brands/1.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="assets/images/demo/brands/2.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="assets/images/demo/brands/3.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="assets/images/demo/brands/4.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="assets/images/demo/brands/5.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="assets/images/demo/brands/6.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="assets/images/demo/brands/7.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="assets/images/demo/brands/8.jpg" alt="">
</div>
</div>
</div>
Images Carousel
<!--
controlls-over = navigation buttons over the image
buttons-autohide = navigation buttons visible on mouse hover only
data-plugin-options:
"singleItem": true
"autoPlay": true (or ms. eg: 4000)
"navigation": true
"pagination": true
"items": "5"
owl-carousel item paddings
.owl-padding-0
.owl-padding-3
.owl-padding-6
.owl-padding-10
.owl-padding-15
.owl-padding-20
-->
<div class="text-center">
<div class="owl-carousel owl-padding-3 buttons-autohide controlls-over" data-plugin-options='{"singleItem": false, "items": "5", "autoPlay": true, "navigation": true, "pagination": false}'>
<a class="img-hover" href="#">
<img class="img-responsive" src="assets/images/demo/451x300/4-min.jpg" alt="">
</a>
<a class="img-hover" href="#">
<img class="img-responsive" src="assets/images/demo/451x300/6-min.jpg" alt="">
</a>
<a class="img-hover" href="#">
<img class="img-responsive" src="assets/images/demo/451x300/19-min.jpg" alt="">
</a>
<a class="img-hover" href="#">
<img class="img-responsive" src="assets/images/demo/451x300/22-min.jpg" alt="">
</a>
<a class="img-hover" href="#">
<img class="img-responsive" src="assets/images/demo/451x300/3-min.jpg" alt="">
</a>
<a class="img-hover" href="#">
<img class="img-responsive" src="assets/images/demo/451x300/17-min.jpg" alt="">
</a>
<a class="img-hover" href="#">
<img class="img-responsive" src="assets/images/demo/451x300/18-min.jpg" alt="">
</a>
<a class="img-hover" href="#">
<img class="img-responsive" src="assets/images/demo/451x300/20-min.jpg" alt="">
</a>
</div>
</div>
News Carousel
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.
- 29th Jan 2015
- 3
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.
- 29th Jan 2015
- 3
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.
- 29th Jan 2015
- 3
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.
- 29th Jan 2015
- 3
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.
- 29th Jan 2015
- 3
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.
- 29th Jan 2015
- 3
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.
- 29th Jan 2015
- 3
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.
- 29th Jan 2015
- 3
<!--
controlls-over = navigation buttons over the image
buttons-autohide = navigation buttons visible on mouse hover only
data-plugin-options:
"singleItem": true
"autoPlay": true (or ms. eg: 4000)
"navigation": true
"pagination": true
"items": "4"
owl-carousel item paddings
.owl-padding-0
.owl-padding-3
.owl-padding-6
.owl-padding-10
.owl-padding-15
.owl-padding-20
-->
<div class="owl-carousel owl-padding-10 buttons-autohide controlls-over" data-plugin-options='{"singleItem": false, "items":"4", "autoPlay": 4000, "navigation": true, "pagination": false}'>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="assets/images/demo/451x300/24-min.jpg" alt="">
</a>
<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="assets/images/demo/451x300/17-min.jpg" alt="">
</a>
<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="assets/images/demo/451x300/30-min.jpg" alt="">
</a>
<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="assets/images/demo/451x300/26-min.jpg" alt="">
</a>
<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="assets/images/demo/451x300/18-min.jpg" alt="">
</a>
<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="assets/images/demo/451x300/34-min.jpg" alt="">
</a>
<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="assets/images/demo/451x300/37-min.jpg" alt="">
</a>
<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="assets/images/demo/451x300/23-min.jpg" alt="">
</a>
<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
</div>
Portfolio Carousel
<!--
controlls-over = navigation buttons over the image
buttons-autohide = navigation buttons visible on mouse hover only
owl-carousel item paddings
.owl-padding-0
.owl-padding-1
.owl-padding-2
.owl-padding-3
.owl-padding-6
.owl-padding-10
.owl-padding-15
.owl-padding-20
-->
<div class="text-center">
<div class="owl-carousel owl-padding-1 nomargin buttons-autohide controlls-over" data-plugin-options='{"singleItem": false, "items": "4", "autoPlay": 3500, "navigation": true, "pagination": false}'>
<!-- item -->
<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">
<!-- lightbox -->
<a class="ico-rounded lightbox" href="assets/images/demo/mockups/1200x800/3-min.jpg" data-plugin-options='{"type":"image"}'>
<span class="fa fa-plus size-20"></span>
</a>
<!-- details -->
<a class="ico-rounded" href="portfolio-single.html">
<span class="glyphicon glyphicon-option-horizontal size-20"></span>
</a>
</span>
</span>
<img class="img-responsive" src="assets/images/demo/mockups/600x399/3-min.jpg" width="600" height="399" alt="">
</figure>
</div>
<!-- /item -->
<!-- item -->
<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">
<!-- lightbox -->
<a class="ico-rounded lightbox" href="assets/images/demo/mockups/1200x800/4-min.jpg" data-plugin-options='{"type":"image"}'>
<span class="fa fa-plus size-20"></span>
</a>
<!-- details -->
<a class="ico-rounded" href="portfolio-single.html">
<span class="glyphicon glyphicon-option-horizontal size-20"></span>
</a>
</span>
</span>
<img class="img-responsive" src="assets/images/demo/mockups/600x399/4-min.jpg" width="600" height="399" alt="">
</figure>
</div>
<!-- /item -->
<!-- item -->
<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">
<!-- lightbox -->
<a class="ico-rounded lightbox" href="assets/images/demo/mockups/1200x800/5-min.jpg" data-plugin-options='{"type":"image"}'>
<span class="fa fa-plus size-20"></span>
</a>
<!-- details -->
<a class="ico-rounded" href="portfolio-single.html">
<span class="glyphicon glyphicon-option-horizontal size-20"></span>
</a>
</span>
</span>
<img class="img-responsive" src="assets/images/demo/mockups/600x399/5-min.jpg" width="600" height="399" alt="">
</figure>
</div>
<!-- /item -->
<!-- item -->
<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">
<!-- lightbox -->
<a class="ico-rounded lightbox" href="assets/images/demo/mockups/1200x800/6-min.jpg" data-plugin-options='{"type":"image"}'>
<span class="fa fa-plus size-20"></span>
</a>
<!-- details -->
<a class="ico-rounded" href="portfolio-single.html">
<span class="glyphicon glyphicon-option-horizontal size-20"></span>
</a>
</span>
</span>
<img class="img-responsive" src="assets/images/demo/mockups/600x399/6-min.jpg" width="600" height="399" alt="">
</figure>
</div>
<!-- /item -->
<!-- item -->
<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">
<!-- lightbox -->
<a class="ico-rounded lightbox" href="assets/images/demo/mockups/1200x800/7-min.jpg" data-plugin-options='{"type":"image"}'>
<span class="fa fa-plus size-20"></span>
</a>
<!-- details -->
<a class="ico-rounded" href="portfolio-single.html">
<span class="glyphicon glyphicon-option-horizontal size-20"></span>
</a>
</span>
</span>
<img class="img-responsive" src="assets/images/demo/mockups/600x399/7-min.jpg" width="600" height="399" alt="">
</figure>
</div>
<!-- /item -->
<!-- item -->
<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">
<!-- lightbox -->
<a class="ico-rounded lightbox" href="assets/images/demo/mockups/1200x800/8-min.jpg" data-plugin-options='{"type":"image"}'>
<span class="fa fa-plus size-20"></span>
</a>
<!-- details -->
<a class="ico-rounded" href="portfolio-single.html">
<span class="glyphicon glyphicon-option-horizontal size-20"></span>
</a>
</span>
</span>
<img class="img-responsive" src="assets/images/demo/mockups/600x399/8-min.jpg" width="600" height="399" alt="">
</figure>
</div>
<!-- /item -->
<!-- item -->
<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">
<!-- lightbox -->
<a class="ico-rounded lightbox" href="assets/images/demo/mockups/1200x800/9-min.jpg" data-plugin-options='{"type":"image"}'>
<span class="fa fa-plus size-20"></span>
</a>
<!-- details -->
<a class="ico-rounded" href="portfolio-single.html">
<span class="glyphicon glyphicon-option-horizontal size-20"></span>
</a>
</span>
</span>
<img class="img-responsive" src="assets/images/demo/mockups/600x399/9-min.jpg" width="600" height="399" alt="">
</figure>
</div>
<!-- /item -->
<!-- item -->
<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">
<!-- lightbox -->
<a class="ico-rounded lightbox" href="assets/images/demo/mockups/1200x800/10-min.jpg" data-plugin-options='{"type":"image"}'>
<span class="fa fa-plus size-20"></span>
</a>
<!-- details -->
<a class="ico-rounded" href="portfolio-single.html">
<span class="glyphicon glyphicon-option-horizontal size-20"></span>
</a>
</span>
</span>
<img class="img-responsive" src="assets/images/demo/mockups/600x399/10-min.jpg" width="600" height="399" alt="">
</figure>
</div>
<!-- /item -->
</div>
</div>