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>