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
Show Code 
<!-- 

CAPTION POSITION CLASSES:
	.owl-caption-top-left
	.owl-caption-top-right
	.owl-caption-bottom-left
	.owl-caption-bottom-right
	.owl-caption-top-center
	.owl-caption-bottom-center

	.owl-caption-text-light	(already light text by default - not required)
	.owl-caption-text-dark


data-plugin-options:
	
"responsiveBaseElement":"#wrapper"  	(you can set "body" or the container. Default: #wrapper)
"loop":true  				(false for no loop)
"margin":10				(magin between items in pixels. Default: 10)
"nav":true				(show or hide navigation)
"center":false 				(true = align to center)
"slideBy":"1" 				(no. of items to slide once. Default: 1)
"dots":true 				(false to hide dots navigation)
"autoplay":false 			(true to enable autoplay)
"autoplayTimeout":2000 			(autoplay delay in milliseconds. Default: 2000)

"responsive":{"0":{"items":1},"600":{"items":2},"1000":{"items":3}}
	Show No. of elements according to resolution:
	0 	= mobile
	600 	= table
	1000 	= desktop
	You can change/remove the values according to your resolution preferences (default: 0, 600, 1000)



ANIMATION - based on animate css plugin (already included in essentials.css)
			required: items should be set to 1 (see responsive)
			https://daneden.github.io/animate.css/

"animateIn":"bounceIn"
"animateOut":"bounceOut"


The full API can be found here:
http://www.owlcarousel.owlgraphic.com/docs/api-options.html
-->

<div class="lightbox" data-plugin-options='{"delegate": "a", "gallery": {"enabled": true}}'>
	<div class="owl-carousel-2 owl-centered-focus" data-plugin-options='{
		"responsiveBaseElement":	"#wrapper", 
		"loop":						true, 
		"margin":					0, 

		"nav":						true, 
		"dots":						false, 

		"center":					true, 
		"slideBy":					"1", 
		"autoplay":					true, 
		"autoplayTimeout":			4500, 
		"autoWidth":				false,
		"merge":					true,
		"rtl":						false,

		"animateIn":				"flipInX",
		"animateOut":				"flipOutX",

		"responsive": {
			"0":	{"items":1},
			"600":	{"items":2},
			"1000":	{"items":2}
		}

	}'>

		<a href="demo_files/images/packs/realestate/gallery-item/2-min.jpg" class="image-hover-plus image-hover-overlay">
			<i class="icon-hover-plus"></i>
			<img class="img-fluid" src="demo_files/images/packs/realestate/gallery-item/2-min.jpg" alt="">
		</a>

		<a href="demo_files/images/packs/realestate/gallery-item/6-min.jpg" class="image-hover-plus image-hover-overlay">
			<i class="icon-hover-plus"></i>
			<img class="img-fluid" src="demo_files/images/packs/realestate/gallery-item/6-min.jpg" alt="">
		</a>

		<a href="demo_files/images/packs/realestate/gallery-item/5-min.jpg" class="image-hover-plus image-hover-overlay">
			<i class="icon-hover-plus"></i>
			<img class="img-fluid" src="demo_files/images/packs/realestate/gallery-item/5-min.jpg" alt="">
		</a>

		<a href="demo_files/images/packs/realestate/gallery-item/3-min.jpg" class="image-hover-plus image-hover-overlay">
			<i class="icon-hover-plus"></i>
			<img class="img-fluid" src="demo_files/images/packs/realestate/gallery-item/3-min.jpg" alt="">
		</a>

	</div>

</div>

With Caption

Owl carousel - optional caption 1 Caption optional subtitle
Owl carousel - optional caption 2 Caption optional subtitle
Owl carousel - optional caption 3 Caption optional subtitle
Show Code 
<!-- 

CAPTION POSITION CLASSES:
	.owl-caption-top-left
	.owl-caption-top-right
	.owl-caption-bottom-left
	.owl-caption-bottom-right
	.owl-caption-top-center
	.owl-caption-bottom-center

	.owl-caption-text-light	(already light text by default - not required)
	.owl-caption-text-dark


data-plugin-options:
	
"responsiveBaseElement":"#wrapper"  	(you can set "body" or the container. Default: #wrapper)
"loop":true  				(false for no loop)
"margin":10				(magin between items in pixels. Default: 10)
"nav":true				(show or hide navigation)
"center":false 				(true = align to center)
"slideBy":"1" 				(no. of items to slide once. Default: 1)
"dots":true 				(false to hide dots navigation)
"autoplay":false 			(true to enable autoplay)
"autoplayTimeout":2000 			(autoplay delay in milliseconds. Default: 2000)

"responsive":{"0":{"items":1},"600":{"items":2},"1000":{"items":3}}
	Show No. of elements according to resolution:
	0 	= mobile
	600 	= table
	1000 	= desktop
	You can change/remove the values according to your resolution preferences (default: 0, 600, 1000)



ANIMATION - based on animate css plugin (already included in essentials.css)
			required: items should be set to 1 (see responsive)
			https://daneden.github.io/animate.css/

"animateIn":"bounceIn"
"animateOut":"bounceOut"


The full API can be found here:
http://www.owlcarousel.owlgraphic.com/docs/api-options.html
-->
<div class="owl-carousel-2 controlls-over clearfix" data-plugin-options='{
	"responsiveBaseElement":	"#middle", 
	"loop":						true, 
	"margin":					10, 

	"nav":						false, 
	"dots":						true, 

	"center":					false, 
	"slideBy":					"1", 
	"autoplay":					true, 
	"autoplayTimeout":			2500, 
	"autoWidth":				false,
	"merge":					false,
	"rtl":						false,

	"animateIn":				"flipInX",
	"animateOut":				"flipOutX",

	"items":					1

	}'>

	<div class="owl-item">
		<span class="owl-caption-bottom-center"><!-- caption -->
			Owl carousel - optional caption 1
			<span class="owl-subtitle">Caption optional subtitle</span>
		</span><!-- /caption -->
		<img class="img-fluid" src="demo_files/images/1200x800/8-min.jpg" alt="">
	</div>
	<div class="owl-item">
		<span class="owl-caption-bottom-left"><!-- caption -->
			Owl carousel - optional caption 2
			<span class="owl-subtitle">Caption optional subtitle</span>
		</span><!-- /caption -->
		<img class="img-fluid" src="demo_files/images/1200x800/9-min.jpg" alt="">
	</div>
	<div class="owl-item">
		<span class="owl-caption-bottom-right"><!-- caption -->
			Owl carousel - optional caption 3
			<span class="owl-subtitle">Caption optional subtitle</span>
		</span><!-- /caption -->
		<img class="img-fluid" src="demo_files/images/1200x800/10-min.jpg" alt="">
	</div>

</div>

Without Caption

Show Code 
<!-- 

CAPTION POSITION CLASSES:
	.owl-caption-top-left
	.owl-caption-top-right
	.owl-caption-bottom-left
	.owl-caption-bottom-right
	.owl-caption-top-center
	.owl-caption-bottom-center

	.owl-caption-text-light	(already light text by default - not required)
	.owl-caption-text-dark


data-plugin-options:
	
"responsiveBaseElement":"#wrapper"  	(you can set "body" or the container. Default: #wrapper)
"loop":true  				(false for no loop)
"margin":10				(magin between items in pixels. Default: 10)
"nav":true				(show or hide navigation)
"center":false 				(true = align to center)
"slideBy":"1" 				(no. of items to slide once. Default: 1)
"dots":true 				(false to hide dots navigation)
"autoplay":false 			(true to enable autoplay)
"autoplayTimeout":2000 			(autoplay delay in milliseconds. Default: 2000)

"responsive":{"0":{"items":1},"600":{"items":2},"1000":{"items":3}}
	Show No. of elements according to resolution:
	0 	= mobile
	600 	= table
	1000 	= desktop
	You can change/remove the values according to your resolution preferences (default: 0, 600, 1000)



ANIMATION - based on animate css plugin (already included in essentials.css)
			required: items should be set to 1 (see responsive)
			https://daneden.github.io/animate.css/

"animateIn":"bounceIn"
"animateOut":"bounceOut"


The full API can be found here:
http://www.owlcarousel.owlgraphic.com/docs/api-options.html
-->
<div class="owl-carousel-2 controlls-over clearfix" data-plugin-options='{
	"responsiveBaseElement":	"#middle", 
	"loop":						true, 
	"margin":					10, 

	"nav":						false, 
	"dots":						true, 

	"center":					false, 
	"slideBy":					"1", 
	"autoplay":					true, 
	"autoplayTimeout":			2500, 
	"autoWidth":				false,
	"merge":					false,
	"rtl":						false,

	"animateIn":				"flipInX",
	"animateOut":				"flipOutX",

	"items":					1

	}'>

	<div class="owl-item">
		<img class="img-fluid" src="demo_files/images/1200x800/8-min.jpg" alt="">
	</div>
	<div class="owl-item">
		<img class="img-fluid" src="demo_files/images/1200x800/9-min.jpg" alt="">
	</div>
	<div class="owl-item">
		<img class="img-fluid" src="demo_files/images/1200x800/10-min.jpg" alt="">
	</div>

</div>

Images Carousel


Show Code 
<!-- 

CAPTION POSITION CLASSES:
	.owl-caption-top-left
	.owl-caption-top-right
	.owl-caption-bottom-left
	.owl-caption-bottom-right
	.owl-caption-top-center
	.owl-caption-bottom-center

	.owl-caption-text-light	(already light text by default - not required)
	.owl-caption-text-dark


data-plugin-options:
	
"responsiveBaseElement":"#wrapper"  	(you can set "body" or the container. Default: #wrapper)
"loop":true  				(false for no loop)
"margin":10				(magin between items in pixels. Default: 10)
"nav":true				(show or hide navigation)
"center":false 				(true = align to center)
"slideBy":"1" 				(no. of items to slide once. Default: 1)
"dots":true 				(false to hide dots navigation)
"autoplay":false 			(true to enable autoplay)
"autoplayTimeout":2000 			(autoplay delay in milliseconds. Default: 2000)

"responsive":{"0":{"items":1},"600":{"items":2},"1000":{"items":3}}
	Show No. of elements according to resolution:
	0 	= mobile
	600 	= table
	1000 	= desktop
	You can change/remove the values according to your resolution preferences (default: 0, 600, 1000)



ANIMATION - based on animate css plugin (already included in essentials.css)
			required: items should be set to 1 (see responsive)
			https://daneden.github.io/animate.css/

"animateIn":"bounceIn"
"animateOut":"bounceOut"


The full API can be found here:
http://www.owlcarousel.owlgraphic.com/docs/api-options.html
-->
	<div class="owl-carousel-2 clearfix" data-plugin-options='{
		"responsiveBaseElement":	"#middle", 
		"loop":						true, 
		"margin":					10, 

		"nav":						false, 
		"dots":						false, 

		"center":					false, 
		"slideBy":					"1", 
		"autoplay":					true, 
		"autoplayTimeout":			3500, 
		"autoWidth":				false,
		"merge":					false,
		"rtl":						false,

		"animateIn":				"flipInX",
		"animateOut":				"flipOutX",

			"responsive": {
				"0":	{"items":4},
				"600":	{"items":4},
				"1000":	{"items":4}
			}

	}'>
	<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>

Images Carousel


Show Code 
<div class="thumbnail mb-8 radius-0">
	<!-- 
		IMAGE ZOOM 
		
		data-mode="mouseover|grab|click|toggle"
	-->
	<figure id="zoom-primary" class="zoom" data-mode="mouseover">
		<!-- 
			zoom buttton
			
			positions available:
				.bottom-right
				.bottom-left
				.top-right
				.top-left
		-->
		<a class="lightbox bottom-right" href="demo_files/images/mockups/1200x800/9-min.jpg" data-plugin-options='{"type":"image"}'>
			<i class="fa fa-search"></i>
		</a>

		<!-- 
			image

			Extra: add .image-bw class to force black and white!
		-->
		<img class="img-fluid image-bw" src="demo_files/images/mockups/1200x800/9-min.jpg" width="568" alt="" />
	</figure>

</div>

<!-- 
	Thumbnails (required height:100px) 
	
	data-for = figure image id match

	NOTE: 	loop wil cause an issue to zoom plugin!
			DO NOT use loop!
-->
<div data-for="zoom-primary" class="owl-carousel-2 zoom-more" data-plugin-options='{
	"responsiveBaseElement":	"#wrapper", 
	"loop":						false, 
	"margin":					8, 

	"nav":						true, 
	"dots":						false, 

	"center":					false, 
	"slideBy":					"1", 
	"autoplay":					false, 
	"autoplayTimeout":			4500, 
	"autoWidth":				false,
	"merge":					true,
	"rtl":						false,

	"animateIn":				"",
	"animateOut":				"",

	"responsive": {
		"0":	{"items":3},
		"960":	{"items":5}
	}

}'>
	<a class="thumbnail radius-0 active" href="demo_files/images/mockups/1200x800/9-min.jpg">
		<img class="img-fluid p-3" src="demo_files/images/mockups/150x100/9-min.jpg" height="100" alt="" />
	</a>
	<a class="thumbnail radius-0" href="demo_files/images/mockups/1200x800/11-min.jpg">
		<img class="img-fluid p-3" src="demo_files/images/mockups/150x100/11-min.jpg" height="100" alt="" />
	</a>
	<a class="thumbnail radius-0" href="demo_files/images/mockups/1200x800/12-min.jpg">
		<img class="img-fluid p-3" src="demo_files/images/mockups/150x100/12-min.jpg" height="100" alt="" />
	</a>
	<a class="thumbnail radius-0" href="demo_files/images/mockups/1200x800/13-min.jpg">
		<img class="img-fluid p-3" src="demo_files/images/mockups/150x100/13-min.jpg" height="100" alt="" />
	</a>
	<a class="thumbnail radius-0" href="demo_files/images/mockups/1200x800/14-min.jpg">
		<img class="img-fluid p-3" src="demo_files/images/mockups/150x100/14-min.jpg" height="100" alt="" />
	</a>
	<a class="thumbnail radius-0" href="demo_files/images/mockups/1200x800/15-min.jpg">
		<img class="img-fluid p-3" src="demo_files/images/mockups/150x100/15-min.jpg" height="100" alt="" />
	</a>
	<a class="thumbnail radius-0" href="demo_files/images/mockups/1200x800/16-min.jpg">
		<img class="img-fluid p-3" src="demo_files/images/mockups/150x100/16-min.jpg" height="100" alt="" />
	</a>
</div>
<!-- /Thumbnails -->