WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

CAROUSEL

  1. Home
  2. Shortcodes
  3. Carousel

Fade

Show Code 

<!-- 

	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-fluid" src="demo_files/images/1200x800/5-min.jpg" alt="">

	</div>

	<div>

		<img class="img-fluid" src="demo_files/images/1200x800/6-min.jpg" alt="">

	</div>

	<div>

		<img class="img-fluid" src="demo_files/images/1200x800/7-min.jpg" alt="">

	</div>

</div>

Back Slide

Show Code 

<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-fluid" src="demo_files/images/1200x800/8-min.jpg" alt="">

	</div>

	<div>

		<img class="img-fluid" src="demo_files/images/1200x800/9-min.jpg" alt="">

	</div>

	<div>

		<img class="img-fluid" src="demo_files/images/1200x800/10-min.jpg" alt="">

	</div>

</div>

Go Down

Show Code 

<!-- 

	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-fluid" src="demo_files/images/1200x800/11-min.jpg" alt="">

	</div>

	<div>

		<img class="img-fluid" src="demo_files/images/1200x800/12-min.jpg" alt="">

	</div>

	<div>

		<img class="img-fluid" src="demo_files/images/1200x800/13-min.jpg" alt="">

	</div>

</div>

Fade Up

Show Code 

<!-- 

	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-fluid" src="demo_files/images/1200x800/16-min.jpg" alt="">

	</div>

	<div>

		<img class="img-fluid" src="demo_files/images/1200x800/17-min.jpg" alt="">

	</div>

	<div>

		<img class="img-fluid" src="demo_files/images/1200x800/18-min.jpg" alt="">

	</div>

</div>

Brands Carousel


Show Code 

<!-- 

	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 mt-30 mb-30">

	<div class="owl-carousel m-0" data-plugin-options='{"singleItem": false, "autoPlay": true}'>

		<div>

			<img class="img-fluid" src="demo_files/images/brands/1.jpg" alt="">

		</div>

		<div>

			<img class="img-fluid" src="demo_files/images/brands/2.jpg" alt="">

		</div>

		<div>

			<img class="img-fluid" src="demo_files/images/brands/3.jpg" alt="">

		</div>

		<div>

			<img class="img-fluid" src="demo_files/images/brands/4.jpg" alt="">

		</div>

		<div>

			<img class="img-fluid" src="demo_files/images/brands/5.jpg" alt="">

		</div>

		<div>

			<img class="img-fluid" src="demo_files/images/brands/6.jpg" alt="">

		</div>

		<div>

			<img class="img-fluid" src="demo_files/images/brands/7.jpg" alt="">

		</div>

		<div>

			<img class="img-fluid" src="demo_files/images/brands/8.jpg" alt="">

		</div>

	</div>

</div>

Images Carousel


Show Code 

<!-- 

	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-fluid" src="demo_files/images/451x300/4-min.jpg" alt="">

		</a>

		<a class="img-hover" href="#">

			<img class="img-fluid" src="demo_files/images/451x300/6-min.jpg" alt="">

		</a>

		<a class="img-hover" href="#">

			<img class="img-fluid" src="demo_files/images/451x300/19-min.jpg" alt="">

		</a>

		<a class="img-hover" href="#">

			<img class="img-fluid" src="demo_files/images/451x300/22-min.jpg" alt="">

		</a>

		<a class="img-hover" href="#">

			<img class="img-fluid" src="demo_files/images/451x300/3-min.jpg" alt="">

		</a>

		<a class="img-hover" href="#">

			<img class="img-fluid" src="demo_files/images/451x300/17-min.jpg" alt="">

		</a>

		<a class="img-hover" href="#">

			<img class="img-fluid" src="demo_files/images/451x300/18-min.jpg" alt="">

		</a>

		<a class="img-hover" href="#">

			<img class="img-fluid" src="demo_files/images/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 2017
  • 3

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.

  • 29th Jan 2017
  • 3

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.

  • 29th Jan 2017
  • 3

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.

  • 29th Jan 2017
  • 3

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.

  • 29th Jan 2017
  • 3

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.

  • 29th Jan 2017
  • 3

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.

  • 29th Jan 2017
  • 3

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.

  • 29th Jan 2017
  • 3
Show Code 

<!-- 

	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-fluid" src="demo_files/images/451x300/24-min.jpg" alt="">

		</a>



		<h4 class="text-left mt-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 fs-12 list-inline list-separator">

			<li>

				<i class="fa fa-calendar"></i> 

				29th Jan 2017

			</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-fluid" src="demo_files/images/451x300/17-min.jpg" alt="">

		</a>



		<h4 class="text-left mt-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 fs-12 list-inline list-separator">

			<li>

				<i class="fa fa-calendar"></i> 

				29th Jan 2017

			</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-fluid" src="demo_files/images/451x300/30-min.jpg" alt="">

		</a>



		<h4 class="text-left mt-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 fs-12 list-inline list-separator">

			<li>

				<i class="fa fa-calendar"></i> 

				29th Jan 2017

			</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-fluid" src="demo_files/images/451x300/26-min.jpg" alt="">

		</a>



		<h4 class="text-left mt-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 fs-12 list-inline list-separator">

			<li>

				<i class="fa fa-calendar"></i> 

				29th Jan 2017

			</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-fluid" src="demo_files/images/451x300/18-min.jpg" alt="">

		</a>

		<h4 class="text-left mt-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 fs-12 list-inline list-separator">

			<li>

				<i class="fa fa-calendar"></i> 

				29th Jan 2017

			</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-fluid" src="demo_files/images/451x300/34-min.jpg" alt="">

		</a>

		<h4 class="text-left mt-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 fs-12 list-inline list-separator">

			<li>

				<i class="fa fa-calendar"></i> 

				29th Jan 2017

			</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-fluid" src="demo_files/images/451x300/37-min.jpg" alt="">

		</a>

		<h4 class="text-left mt-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 fs-12 list-inline list-separator">

			<li>

				<i class="fa fa-calendar"></i> 

				29th Jan 2017

			</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-fluid" src="demo_files/images/451x300/23-min.jpg" alt="">

		</a>

		<h4 class="text-left mt-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 fs-12 list-inline list-separator">

			<li>

				<i class="fa fa-calendar"></i> 

				29th Jan 2017

			</li>

			<li>

				<a href="blog-single-default.html#comments">

					<i class="fa fa-comments"></i> 

					3

				</a>

			</li>

		</ul>

	</div>

</div>

Portfolio Carousel


Show Code 

<!-- 

	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 m-0 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="demo_files/images/mockups/1200x800/3-min.jpg" data-plugin-options='{"type":"image"}'>

							<span class="fa fa-plus fs-20"></span>

						</a>



						<!-- details -->

						<a class="ico-rounded" href="portfolio-single.html">

							<span class="glyphicon glyphicon-option-horizontal fs-20"></span>

						</a>



					</span>

				</span>



				<img class="img-fluid" src="demo_files/images/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="demo_files/images/mockups/1200x800/4-min.jpg" data-plugin-options='{"type":"image"}'>

							<span class="fa fa-plus fs-20"></span>

						</a>



						<!-- details -->

						<a class="ico-rounded" href="portfolio-single.html">

							<span class="glyphicon glyphicon-option-horizontal fs-20"></span>

						</a>



					</span>

				</span>



				<img class="img-fluid" src="demo_files/images/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="demo_files/images/mockups/1200x800/5-min.jpg" data-plugin-options='{"type":"image"}'>

							<span class="fa fa-plus fs-20"></span>

						</a>



						<!-- details -->

						<a class="ico-rounded" href="portfolio-single.html">

							<span class="glyphicon glyphicon-option-horizontal fs-20"></span>

						</a>



					</span>

				</span>



				<img class="img-fluid" src="demo_files/images/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="demo_files/images/mockups/1200x800/6-min.jpg" data-plugin-options='{"type":"image"}'>

							<span class="fa fa-plus fs-20"></span>

						</a>



						<!-- details -->

						<a class="ico-rounded" href="portfolio-single.html">

							<span class="glyphicon glyphicon-option-horizontal fs-20"></span>

						</a>



					</span>

				</span>



				<img class="img-fluid" src="demo_files/images/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="demo_files/images/mockups/1200x800/7-min.jpg" data-plugin-options='{"type":"image"}'>

							<span class="fa fa-plus fs-20"></span>

						</a>



						<!-- details -->

						<a class="ico-rounded" href="portfolio-single.html">

							<span class="glyphicon glyphicon-option-horizontal fs-20"></span>

						</a>



					</span>

				</span>



				<img class="img-fluid" src="demo_files/images/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="demo_files/images/mockups/1200x800/8-min.jpg" data-plugin-options='{"type":"image"}'>

							<span class="fa fa-plus fs-20"></span>

						</a>



						<!-- details -->

						<a class="ico-rounded" href="portfolio-single.html">

							<span class="glyphicon glyphicon-option-horizontal fs-20"></span>

						</a>



					</span>

				</span>



				<img class="img-fluid" src="demo_files/images/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="demo_files/images/mockups/1200x800/9-min.jpg" data-plugin-options='{"type":"image"}'>

							<span class="fa fa-plus fs-20"></span>

						</a>



						<!-- details -->

						<a class="ico-rounded" href="portfolio-single.html">

							<span class="glyphicon glyphicon-option-horizontal fs-20"></span>

						</a>



					</span>

				</span>



				<img class="img-fluid" src="demo_files/images/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="demo_files/images/mockups/1200x800/10-min.jpg" data-plugin-options='{"type":"image"}'>

							<span class="fa fa-plus fs-20"></span>

						</a>



						<!-- details -->

						<a class="ico-rounded" href="portfolio-single.html">

							<span class="glyphicon glyphicon-option-horizontal fs-20"></span>

						</a>



					</span>

				</span>



				<img class="img-fluid" src="demo_files/images/mockups/600x399/10-min.jpg" width="600" height="399" alt="">

			</figure>

		</div>

		<!-- /item -->



	</div>

</div>