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