redo main/register page

2022-04-13 13:12:19 -07:00
1 parent eaa2febbf2
commit 1ad5eb654b
@@ -0,0 +1,32 @@
+$(document).ready(function(){
+
+	// responsive nav
+	var responsiveNav = $('#toggle-nav');
+	var navBar = $('.nav-bar');
+
+	responsiveNav.on('click',function(e){
+		e.preventDefault();
+		console.log(navBar);
+		navBar.toggleClass('active')
+	});
+
+	// pseudo active
+	if($('#docs').length){
+		var sidenav = $('ul.side-nav').find('a');
+		var url = window.location.pathname.split( '/' );
+		var url = url[url.length-1];
+		
+		sidenav.each(function(i,e){
+			var active = $(e).attr('href');
+
+			if(active === url){
+				$(e).parent('li').addClass('active');
+				return false;
+			}
+		});
+	}
+
+});
+
+hljs.configure({tabReplace: '  '});
+hljs.initHighlightingOnLoad();
@@ -0,0 +1,364 @@
+$owl-primary-color: #1ccacd;
+$owl-success-color: #ff3f4d;
+$owl-gray-color: #f7f7f7;
+
+
+$medium-down: "#{$screen} and (max-width:#{lower-bound($medium-range)})" !default;
+
+/* Custom mixins */
+
+@mixin owl-transition($p:all, $t:300ms) {
+	-webkit-transition: $p $t ease-in-out;
+	-moz-transition: $p $t ease-in-out;
+	-ms-transition: $p $t ease-in-out;
+	-o-transition: $p $t ease-in-out;
+	transition: $p $t ease-in-out;
+}
+
+@mixin owl-radius($r:3px) {
+	-webkit-border-radius: $r;
+	-moz-border-radius: $r;
+	border-radius: $r;
+}
+
+/* Header */
+
+.header{
+	background: #1ccacd;
+
+	.brand {
+		h3{
+			font-weight: 300;
+			font-style: italic;
+			color: #FFF;
+			margin: 1.35rem 0;
+			line-height: 1;
+			font-size: 1.5rem;
+			a{
+				color: #FFF;
+				&:hover{
+					color: #FFF;
+				}
+			}
+		}
+	}
+}
+
+/* Header */
+
+.nav-bar{
+	float:right;
+	ul{
+		list-style: none;
+		margin: 0;
+		padding: 0;
+
+		li{
+			float:left;
+
+			&.active{
+				a {
+					opacity: 1;
+				}
+			}
+
+			a{
+				opacity: 0.8;
+				margin: 1.73rem 0 1.73rem 2rem;
+				display: block;
+				color: #fff;
+				line-height: 1;
+				@include owl-transition(opacity,200ms);
+
+				&:hover{
+					opacity: 1;
+				}
+			}
+			.download{
+				width:1rem;
+				height: 1rem;
+				background: $owl-success-color;
+				display: block;
+				position: absolute;
+				top: 1rem;
+				right: 0;
+				border: 2px solid #FFF;
+				background: url(../img/download.png) $owl-success-color no-repeat 50% 55%;
+				@include owl-radius(100%);
+			}
+		}
+	}
+}
+
+
+#toggle-nav {
+	width: 2rem;
+	display: block;
+	margin: 1.5rem 0 1.2rem 0rem;
+	span {
+		width: 100%;
+		height: 0.25rem;
+		margin-bottom: 0.3rem;
+		background: #FFF;
+		display: block;
+	}
+}
+
+@media #{$medium-up} {
+	#toggle-nav{
+		display: none;
+	}
+}
+@media #{$small-only} {
+	.nav-bar {
+		display: none;
+	}
+	.nav-bar.active {
+		float:right;
+		clear:both;
+		display: block;
+		a{
+			margin: 1rem 0 1rem 1rem;
+		}
+		.download{
+			display: none;
+		}
+	}
+}
+
+/* Home Panel */
+#hero{
+	background: $owl-primary-color;
+	padding: 5rem 0;
+
+	.owl-logo{
+		margin: 0 auto;
+		display: block;
+	}
+
+	h1{
+		color: #FFF;
+		font-weight: 300;
+		font-size: 3.375rem;
+		margin: 0rem;
+	}
+	h4{
+		color:#FFF;
+		font-weight: 300;
+		font-size: 1.500rem;
+		margin-top: 1rem;
+		margin-bottom: 2rem;
+	}
+	.hero-button{
+		display: inline-block;
+		padding: 1rem 2rem;
+		margin-right: 0.75rem;
+		font-size: 1.250rem;
+		font-weight: 400;
+		background: #FFF;
+		color: $owl-primary-color;
+		border: 1px solid #FFF;
+		@include owl-radius(2px);
+		@include owl-transition(all,200ms);
+
+		&.outline{
+			background: transparent;
+			color: #FFF;
+		}
+		&:hover{
+			background: $owl-success-color;
+			border: 1px solid $owl-success-color;
+			color: #FFF;
+		}
+	}
+	p{
+		color: #FFF;
+		margin: 0.5rem 0;
+		opacity: 0.7;
+		font-weight: 300;
+	}
+}
+
+@media (max-width: 768px){
+	#hero {
+		padding: 2rem 0;
+		h1{
+			color: #FFF;
+			font-weight: 300;
+			font-size: 2rem;
+		}
+		h4{
+			color:#FFF;
+			font-weight: 300;
+			font-size: 1.2rem;
+			margin-bottom: 2rem;
+		}
+	}
+}
+@media #{$small-only} {
+	#hero{
+		.owl-logo{
+			display: none;
+		}
+	}
+}
+
+
+
+/* Home Demo */
+
+.owl-carousel{
+	.item{
+
+	}
+}
+.home-demo{
+	padding: 2rem 0;
+	.item{
+		background: $owl-success-color;
+	}
+	h3{
+		text-align: center;
+		color: #808080;
+		margin: 2rem;
+	}
+	h2{
+		color: #FFF;
+		text-align: center;
+		padding: 5rem 0;
+		margin:0;
+		font-style: italic;
+		font-weight: 300;
+	}
+	.owl-dot.active span{
+		background: $owl-success-color;
+	}
+}
+
+/* Features */
+
+#features{
+	.feature{
+		margin: 2rem 0 6rem;
+	}
+	h2{
+		font-weight: 300;
+		margin-top: 0;
+		margin-bottom: 1rem;
+	}
+	img{
+		display: block;
+		margin: 0 auto;
+	}
+}
+@media #{$small-only} {
+	#features{
+		.feature{
+			margin: 1rem 0;
+		}
+		img{
+			display: block;
+			margin: 1rem auto;
+		}
+	}
+}
+/* Teaser Text */
+
+#teaser-text{
+	text-align: center;
+	h3{
+		font-weight: 300;
+		color: #1ccacd;
+	}
+}
+
+/* Footer */
+
+.footer{
+	margin-top: 5rem;
+	background: #f7f7f7;
+	h5{
+		text-align: center;
+		color: #8d8d8d;
+		margin: 2rem 0 ;
+		font-weight: normal;
+		font-size: 1rem;
+		a{
+			font-weight: normal;
+			margin-right: 0.3rem;
+		}
+	}
+}
+a#custom-tweet-button  {
+	padding: 6px 13px 6px 13px;
+	margin-left: 0px;
+	background: url('../img/twitter_25.png') 1px center no-repeat;
+}
+
+blockquote p {
+	color:#A0A0A0
+}
+
+
+/* Title */
+
+.title{
+	background: $owl-gray-color;
+	margin-bottom: 2rem;
+	h1{
+		margin: 0;
+		padding: 1.2rem 0;
+		font-weight: 300;
+	}
+}
+
+@media #{$small-only} {
+	.title{
+		margin-bottom: 0rem;
+	}
+}
+
+/* demo blocks */
+
+.demo-block{
+	background: #eaeaea;
+	height: 6rem;
+	padding: 1rem;
+	margin-bottom: 1rem;
+	display: block;
+	@include owl-transition(background,200ms);
+
+	&:hover{
+		background: $owl-primary-color;
+		h5{
+			color: #FFF;
+		}
+	}
+	h5{
+		font-weight: normal;
+	}
+}
+
+
+/* Type */
+
+code {
+	font-weight: bold;
+	background: $owl-gray-color;
+	font-size: 90%;
+	font-weight: normal;
+	padding: 1px 5px;
+	@include owl-radius(2px)
+}
+
+blockquote{
+	padding: 1rem 1rem;
+	border-left: 7px solid $owl-primary-color;
+}
+blockquote p{
+	font-size: 1.1rem;
+	margin:0;
+}
+p{
+	color: #555555;
+}
@@ -0,0 +1,45 @@
+#demos{
+	.owl-carousel{
+		margin: 2rem 0;
+		.item{
+			height: 10rem;
+			background: #4DC7A0;// $owl-success-color;
+			padding: 1rem;
+			h4{
+				color: #FFF;
+				font-weight: 400;
+				margin-top: 0rem;
+			}
+		}
+		.item-video{
+			height: 300px;
+		}
+	}
+	#setup{
+		margin-top: 4rem;
+	}
+
+	.demo-list{
+		h5{
+			margin: 0;
+		}
+	}
+}
+
+
+@media #{$small-up} {
+	.demo-list{
+		[class*="column"]+[class*="column"]:last-child {
+			float: left;
+		}
+	}
+}
+
+.callbacks{
+	div{
+		margin-bottom: 0.3rem;
+	}
+	span.label{
+		@include owl-transition();
+	}
+}
@@ -0,0 +1,53 @@
+#docs{
+	padding-top: 2rem;
+	.docs-content{
+		//padding-left: 2rem;
+		h2:first-child {
+			padding-top: 0;
+			margin-top: 0;
+		}
+	}
+	h4{
+		margin-top: 0.3rem;
+		margin-bottom: 0.5rem;
+	}
+}
+
+#docs{
+	/* Side Nav */
+	ul.side-nav{
+		text-align: right;
+		margin-bottom: 1rem;
+		li{
+			margin: 0;
+			padding: .3rem 3rem .3rem 0;
+			&:hover,
+			&.active {
+				background: $owl-gray-color;
+				a{
+					color: #000;
+					background-color: transparent;
+				}
+			}
+		}
+		li.side-nav-head{
+			text-transform: uppercase;
+			color: #000;
+			font-size: 1rem;
+			font-weight: bold;
+			padding: 0rem 3rem .3rem 0;
+			&:hover {
+				background: transparent;
+			}
+		}
+	}
+}
+
+@media #{$small-only} {
+	#docs{
+		padding-top: 1rem;
+		ul.side-nav{
+			text-align: left;
+		}
+	}
+}
@@ -0,0 +1,7 @@
+@import "settings";
+@import "normalize";
+@import "foundation";
+@import "custom";
+@import "demos";
+@import "docs";
+@import "highlight";
@@ -0,0 +1,134 @@
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+pre {
+  overflow-y: hidden;
+  margin-bottom: 2rem;
+  background: #f8f8f8;
+}
+
+.hljs {
+  display: block; 
+  color: #333;
+  background: #f8f8f8;
+  padding: 2rem;
+  line-height: 1.4;
+  overflow-x: scroll;
+}
+
+.hljs-comment,
+.hljs-template_comment,
+.diff .hljs-header,
+.hljs-javadoc {
+  color: #B9B9B9;
+  font-style: italic
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.javascript .hljs-title,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+  color: #333;
+  font-weight: bold
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+  color: #099;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.tex .hljs-formula {
+  color: #bd240d
+}
+
+.hljs-title,
+.hljs-id,
+.coffeescript .hljs-params,
+.scss .hljs-preprocessor {
+  color: #900;
+  font-weight: bold
+}
+
+.javascript .hljs-title,
+.lisp .hljs-title,
+.clojure .hljs-title,
+.hljs-subst {
+  font-weight: normal
+}
+
+.hljs-class .hljs-title,
+.haskell .hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+  color: #458;
+  font-weight: bold
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+  color: #000080;
+  font-weight: normal
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+  color: #008080
+}
+
+.hljs-regexp {
+  color: #009926
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+  color: #333333
+}
+
+.hljs-built_in,
+.lisp .hljs-title,
+.clojure .hljs-built_in {
+  color: #0086b3
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: #999;
+  font-weight: bold
+}
+
+.hljs-deletion {
+  background: #fdd
+}
+
+.hljs-addition {
+  background: #dfd
+}
+
+.diff .hljs-change {
+  background: #0086b3
+}
+
+.hljs-chunk {
+  color: #aaa
+}
@@ -0,0 +1,8 @@
+/*! Copyright (c) 2013 Brandon Aaron (http://brandon.aaron.sh)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Version: 3.1.11
+ *
+ * Requires: jQuery 1.2.2+
+ */
+!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.11",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b)["offsetParent"in a.fn?"offsetParent":"parent"]();return c.length||(c=a("body")),parseInt(c.css("fontSize"),10)},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
@@ -0,0 +1,86 @@
+[
+  {
+    "name":     "refreshClass",
+    "type":     "String",
+    "Default":  "owl-refresh",
+    "desc":     "Class during refresh."
+  },
+  {
+    "name":     "loadingClass",
+    "type":     "String",
+    "Default":  "owl-loading",
+    "desc":     "Class during load."
+  },
+  {
+    "name":     "loadedClass",
+    "type":     "String",
+    "Default":  "owl-loaded",
+    "desc":     "Class after load."
+  },
+  {
+    "name":     "rtlClass",
+    "type":     "String",
+    "Default":  "owl-rtl",
+    "desc":     "Class for right to left mode."
+  },
+  {
+    "name":     "dragClass",
+    "type":     "String",
+    "Default":  "owl-drag",
+    "desc":     "Class for mouse drag mode."
+  },
+  {
+    "name":     "grabClass",
+    "type":     "String",
+    "Default":  "owl-grab",
+    "desc":     "Class during mouse drag."
+  },
+  {
+    "name":     "stageClass",
+    "type":     "String",
+    "Default":  "owl-stage",
+    "desc":     "Stage class."
+  },
+  {
+    "name":     "stageOuterClass",
+    "type":     "String",
+    "Default":  "owl-stage-outer",
+    "desc":     "Stage outer class."
+  },
+  {
+    "name":     "navContainerClass",
+    "type":     "String",
+    "Default":  "owl-nav",
+    "desc":     "Navigation container class."
+  },
+  {
+    "name":     "navClass",
+    "type":     "Array",
+    "Default":  "['owl-prev','owl-next']",
+    "desc":     "Navigation buttons classes."
+  },
+  {
+    "name":     "dotClass",
+    "type":     "String",
+    "Default":  "owl-dot",
+    "desc":     "Dot Class."
+  },
+  {
+    "name":     "dotsClass",
+    "type":     "String",
+    "Default":  "owl-dots",
+    "desc":     "Dots container class."
+  },
+  {
+    "name":     "autoHeightClass",
+    "type":     "String",
+    "Default":  "owl-height",
+    "desc":     "Auto height class."
+  },
+  {
+    "name":     "responsiveClass",
+    "type":     "String|Boolean",
+    "Default":  "false",
+    "desc":     "Optional helper class. Add '<responsiveClass>-<breakpoint>' class to main element. Can be used to stylize content on given breakpoint."
+  }
+]
@@ -0,0 +1,173 @@
+[
+  {
+    "namespace": "Carousel",
+    "events": [
+      {
+        "name": "initialize.owl.carousel",
+        "type": "attachable",
+        "callback": "onInitialize",
+        "desc": "When the plugin initializes."
+      },
+      {
+        "name": "initialized.owl.carousel",
+        "type": "attachable",
+        "callback": "onInitialized",
+        "desc": "When the plugin has initialized."
+      },
+      {
+        "name": "resize.owl.carousel",
+        "type": "attachable",
+        "callback": "onResize",
+        "desc": "When the plugin gets resized."
+      },
+      {
+        "name": "resized.owl.carousel",
+        "type": "attachable",
+        "callback": "onResized",
+        "desc": "When the plugin has resized."
+      },
+      {
+        "name": "refresh.owl.carousel",
+        "type": "attachable, cancelable, triggerable",
+        "callback": "onRefresh",
+        "param": "[event, speed]",
+        "desc": "When the internal state of the plugin needs update."
+      },
+      {
+        "name": "refreshed.owl.carousel",
+        "type": "attachable",
+        "callback": "onRefreshed",
+        "desc": "When the internal state of the plugin has updated."
+      },
+      {
+        "name": "drag.owl.carousel",
+        "type": "attachable",
+        "callback": "onDrag",
+        "desc": "When the dragging of an item is started."
+      },
+      {
+        "name": "dragged.owl.carousel",
+        "type": "attachable",
+        "callback": "onDragged",
+        "desc": "When the dragging of an item has finished."
+      },
+      {
+        "name": "translate.owl.carousel",
+        "type": "attachable",
+        "callback": "onTranslate",
+        "desc": "When the translation of the stage starts."
+      },
+      {
+        "name": "translated.owl.carousel",
+        "type": "attachable",
+        "callback": "onTranslated",
+        "desc": "When the translation of the stage has finished."
+      },
+      {
+        "name": "change.owl.carousel",
+        "type": "attachable",
+        "callback": "onChange",
+        "param": "property",
+        "desc": "When a property is going to change its value."
+      },
+      {
+        "name": "changed.owl.carousel",
+        "type": "attachable",
+        "callback": "onChanged",
+        "param": "property",
+        "desc": "When a property has changed its value."
+      },
+      {
+        "name": "next.owl.carousel",
+        "type": "triggerable",
+        "param": "[speed]",
+        "desc": "Goes to next item."
+      },
+      {
+        "name": "prev.owl.carousel",
+        "type": "triggerable",
+        "param": "[speed]",
+        "desc": "Goes to previous item."
+      },
+      {
+        "name": "to.owl.carousel",
+        "type": "triggerable",
+        "param": "[position, speed]",
+        "desc": "Goes to position."
+      },
+      {
+        "name": "destroy.owl.carousel",
+        "type": "triggerable",
+        "desc": "Destroys carousel."
+      },
+      {
+        "name": "replace.owl.carousel",
+        "type": "triggerable",
+        "param": "data",
+        "desc": "Removes current content and add a new one passed in the parameter."
+      },
+      {
+        "name": "add.owl.carousel",
+        "type": "triggerable",
+        "param": "[data, position]",
+        "desc": "Adds a new item on a given position."
+      },
+      {
+        "name": "remove.owl.carousel",
+        "type": "triggerable",
+        "param": "position",
+        "desc": "Removes an item from a given position."
+      }
+    ]
+  },
+  {
+    "namespace": "Lazy",
+    "events": [
+      {
+        "name": "load.owl.lazy",
+        "type": "attachable",
+        "callback": "onLoadLazy",
+        "desc": "When lazy image loads."
+      },
+      {
+        "name": "loaded.owl.lazy",
+        "type": "attachable",
+        "callback": "onLoadedLazy",
+        "desc": "When lazy image has loaded."
+      }
+    ]
+  },
+  {
+    "namespace": "Autoplay",
+    "events": [
+      {
+        "name": "play.owl.autoplay",
+        "type": "triggerable",
+        "param": "[timeout, speed]",
+        "desc": "Runs autoplay."
+      },
+      {
+        "name": "stop.owl.autoplay",
+        "type": "triggerable",
+        "desc": "Stops autoplay."
+      }
+    ]
+  },
+  {
+    "namespace": "Video",
+    "events": [
+      {
+        "name": "stop.owl.video",
+        "type": "attachable",
+        "callback": "onStopVideo",
+        "desc": "When video has unloaded."
+      },
+      {
+        "name": "play.owl.video",
+        "type": "attachable",
+        "callback": "onPlayVideo",
+        "desc": "When video has loaded."
+      }
+    ]
+  }
+]
@@ -0,0 +1,33 @@
+[
+  {
+    "title": "Fully Customisable",
+    "subtitle": "Over 60 options. Easy for novice users and even more powerful for advanced developers.",
+    "image": "feature-options.png"
+  },
+  {
+    "title": "Touch and Drag Support",
+    "subtitle": "Designed specially to boost mobile browsing experience. Mouse drag works great on desktop too!",
+    "image": "feature-drag.png"
+  },
+  {
+    "title": "Fully Responsive",
+    "subtitle": "Almost all options are responsive and include very intuitive breakpoints settings.",
+    "image": "feature-responsive.png"
+  },
+  {
+    "title": "Modern Browsers",
+    "subtitle": "Owl uses hardware acceleration with CSS3 Translate3d transitions. Its fast and works like a charm! ",
+    "image": "feature-modern.png"
+  },
+  {
+    "title": "Zombie Browsers",
+    "subtitle": "CSS2 fallback supported for older browser.",
+    "image": "feature-zombie.png"
+  }
+  ,
+  {
+    "title": "Modules and Plugins",
+    "subtitle": "Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won't use on your project or create new ones that fit your needs",
+    "image": "feature-module.png"
+  }
+]
@@ -0,0 +1,308 @@
+[
+  {
+    "name":     "items",
+    "type":     "Number",
+    "Default":  "3",
+    "desc":     "The number of items you want to see on the screen."
+  },
+  {
+    "name":     "margin",
+    "type":     "Number",
+    "Default":  "0",
+    "desc":     "margin-right(px) on item."
+  },
+  {
+    "name":     "loop",
+    "type":     "Boolean",
+    "Default":  "false",
+    "desc":     "Infinity loop. Duplicate last and first items to get loop illusion."
+  },
+  {
+    "name":     "center",
+    "type":     "Boolean",
+    "Default":  "false",
+    "desc":     "Center item. Works well with even an odd number of items."
+  },
+  {
+    "name":     "mouseDrag",
+    "type":     "Boolean",
+    "Default":  "true",
+    "desc":     "Mouse drag enabled."
+  },
+  {
+    "name":     "touchDrag",
+    "type":     "Boolean",
+    "Default":  "true",
+    "desc":     "Touch drag enabled."
+  },
+  {
+    "name":     "pullDrag",
+    "type":     "Boolean",
+    "Default":  "true",
+    "desc":     "Stage pull to edge."
+  },
+  {
+    "name":     "freeDrag",
+    "type":     "Boolean",
+    "Default":  "false",
+    "desc":     "Item pull to edge."
+  },
+  {
+    "name":     "stagePadding",
+    "type":     "Number",
+    "Default":  "0",
+    "desc":     "Padding left and right on stage (can see neighbours)."
+  },
+  {
+    "name":     "merge",
+    "type":     "Boolean",
+    "Default":  "false",
+    "desc":     "Merge items. Looking for data-merge='{number}' inside item.."
+  },
+  {
+    "name":     "mergeFit",
+    "type":     "Boolean",
+    "Default":  "true",
+    "desc":     "Fit merged items if screen is smaller than items value."
+  },
+  {
+    "name":     "autoWidth",
+    "type":     "Boolean",
+    "Default":  "false",
+    "desc":     "Set non grid content. Try using width style on divs."
+  },
+  {
+    "name":     "startPosition",
+    "type":     "Number/String",
+    "Default":  "0",
+    "desc":     "Start position or URL Hash string like '#id'."
+  },
+  {
+    "name":     "URLhashListener",
+    "type":     "Boolean",
+    "Default":  "false",
+    "desc":     "Listen to url hash changes. data-hash on items is required."
+  },
+  {
+    "name":     "nav",
+    "type":     "Boolean",
+    "Default":  "false",
+    "desc":     "Show next/prev buttons."
+  },
+  {
+    "name":     "rewind",
+    "type":     "Boolean",
+    "Default":  "true",
+    "desc":     "Go backwards when the boundary has reached."
+  },
+  {
+    "name":     "navText",
+    "type":     "Array",
+    "Default":  "['next','prev']",
+    "desc":     "HTML allowed."
+  },
+    {
+    "name":     "navElement",
+    "type":     "String",
+    "Default":  "div",
+    "desc":     "DOM element type for a single directional navigation link."
+  },
+  {
+    "name":     "slideBy",
+    "type":     "Number/String",
+    "Default":  "1",
+    "desc":     "Navigation slide by x. 'page' string can be set to slide by page."
+  },
+  {
+    "name":     "slideTransition",
+    "type":     "String",
+    "Default":  "",
+    "desc":     "You can define the transition for the stage you want to use eg. linear."
+  },
+  {
+    "name":     "dots",
+    "type":     "Boolean",
+    "Default":  "true",
+    "desc":     "Show dots navigation."
+  },
+  {
+    "name":     "dotsEach",
+    "type":     "Number/Boolean",
+    "Default":  "false",
+    "desc":     "Show dots each x item."
+  },
+  {
+    "name":     "dotsData",
+    "type":     "Boolean",
+    "Default":  "false",
+    "desc":     "Used by data-dot content."
+  },
+  {
+    "name":     "lazyLoad",
+    "type":     "Boolean",
+    "Default":  "false",
+    "desc":     "Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not <img>"
+  },
+  {
+    "name":     "lazyLoadEager",
+    "type":     "Number",
+    "Default":  "0",
+    "desc":     "Eagerly pre-loads images to the right (and left when loop is enabled) based on how many items you want to preload."
+  },
+  {
+    "name":     "autoplay",
+    "type":     "Boolean",
+    "Default":  "false",
+    "desc":     "Autoplay."
+  },
+  {
+    "name":     "autoplayTimeout",
+    "type":     "Number",
+    "Default":  "5000",
+    "desc":     "Autoplay interval timeout."
+  },
+  {
+    "name":     "autoplayHoverPause",
+    "type":     "Boolean",
+    "Default":  "false",
+    "desc":     "Pause on mouse hover."
+  },
+  {
+    "name":     "smartSpeed",
+    "type":     "Number",
+    "Default":  "250",
+    "desc":     "Speed Calculate. More info to come.."
+  },
+  {
+    "name":     "fluidSpeed",
+    "type":     "Boolean",
+    "Default":  "Number",
+    "desc":     "Speed Calculate. More info to come.."
+  },
+  {
+    "name":     "autoplaySpeed",
+    "type":     "Number/Boolean",
+    "Default":  "false",
+    "desc":     "autoplay speed."
+  },
+  {
+    "name":     "navSpeed",
+    "type":     "Number/Boolean",
+    "Default":  "false",
+    "desc":     "Navigation speed."
+  },
+  {
+    "name":     "dotsSpeed",
+    "type":     "Boolean",
+    "Default":  "Number/Boolean",
+    "desc":     "Pagination speed."
+  },
+  {
+    "name":     "dragEndSpeed",
+    "type":     "Number/Boolean",
+    "Default":  "false",
+    "desc":     "Drag end speed."
+  },
+  {
+    "name":     "callbacks",
+    "type":     "Boolean",
+    "Default":  "true",
+    "desc":     "Enable callback events."
+  },
+  {
+    "name":     "responsive",
+    "type":     "Object",
+    "Default":  "empty object",
+    "desc":     "Object containing responsive options. Can be set to false to remove responsive capabilities."
+  },
+  {
+    "name":     "responsiveRefreshRate",
+    "type":     "Number",
+    "Default":  "200",
+    "desc":     "Responsive refresh rate."
+  },
+  {
+    "name":     "responsiveBaseElement",
+    "type":     "DOM element",
+    "Default":  "window",
+    "desc":     "Set on any DOM element. If you care about non responsive browser (like ie8) then use it on main wrapper. This will prevent from crazy resizing."
+  },
+  {
+    "name":     "video",
+    "type":     "Boolean",
+    "Default":  "false",
+    "desc":     "Enable fetching YouTube/Vimeo/Vzaar videos."
+  },
+  {
+    "name":     "videoHeight",
+    "type":     "Number/Boolean",
+    "Default":  "false",
+    "desc":     "Set height for videos."
+  },
+  {
+    "name":     "videoWidth",
+    "type":     "Number/Boolean",
+    "Default":  "false",
+    "desc":     "Set width for videos."
+  },
+  {
+    "name":     "animateOut",
+    "type":     "String/Boolean",
+    "Default":  "false",
+    "desc":     "Class for CSS3 animation out."
+  },
+  {
+    "name":     "animateIn",
+    "type":     "String/Boolean",
+    "Default":  "false",
+    "desc":     "Class for CSS3 animation in."
+  },
+  {
+    "name":     "fallbackEasing",
+    "type":     "String",
+    "Default":  "swing",
+    "desc":     "Easing for CSS2 $.animate."
+  },
+  {
+    "name":     "info",
+    "type":     "Function",
+    "Default":  "false",
+    "desc":     "Callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference."
+  },
+  {
+    "name":     "nestedItemSelector",
+    "type":     "String/Class",
+    "Default":  "false",
+    "desc":     "Use it if owl items are deep nested inside some generated content. E.g 'youritem'. Dont use dot before class name."
+  },
+  {
+    "name":     "itemElement",
+    "type":     "String",
+    "Default":  "div",
+    "desc":     "DOM element type for owl-item."
+  },
+  {
+    "name":     "stageElement",
+    "type":     "String",
+    "Default":  "div",
+    "desc":     "DOM element type for owl-stage."
+  },
+  {
+    "name":     "navContainer",
+    "type":     "String/Class/ID/Boolean",
+    "Default":  "false",
+    "desc":     "Set your own container for nav."
+  },
+  {
+    "name":     "dotsContainer",
+    "type":     "String/Class/ID/Boolean",
+    "Default":  "false",
+    "desc":     "Set your own container for nav."
+  },
+  {
+    "name":     "checkVisible",
+    "type":     "Boolean",
+    "Default":  "true",
+    "desc":     "If you know the carousel will always be visible you can set `checkVisibility` to `false` to prevent the expensive browser layout forced reflow the $element.is(':visible') does."
+  }
+]
@@ -0,0 +1,13 @@
+module.exports.register = function (Handlebars, options)  { 
+  // Handlebars.registerHelper('isActive', function (dest, pageName)  { 
+  //   var a = dest;
+  //   var b = pageName;
+
+  //   if(a.indexOf(b) > -1){
+  //   	return 'class="active"'
+  // 	} else {
+  	
+  // 	}
+    
+  // });
+};
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<!-- head -->
+{{> head }}
+
+<!-- Yeah i know js should not be in header. Its required for demos.-->
+
+<!-- javascript -->
+{{> javascripts }}
+
+	
+</head>
+<body>
+<!-- header -->
+{{> header }}
+
+<!-- title -->
+{{> title }}
+
+<!--  Demos -->
+<section id="demos">
+	<div class="row">
+		<div class="large-12 columns">
+			{{> body }}
+		</div>
+	</div>
+</section>
+
+<!-- footer -->
+{{> footer }}
+
+	<!-- vendors -->
+{{> vendors }}
+
+</body>
+</html>
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<!-- head -->
+{{> head }}
+	
+<!-- Yeah i know js should not be in header. Its required for demos.-->
+
+<!-- javascript -->
+{{> javascripts }}
+
+</head>
+<body>
+<!-- header -->
+{{> header }}
+
+<!-- title -->
+{{> title }}
+<div id="docs">
+	<div class="row">
+		<div class="small-12 medium-3 large-3 columns">
+			{{> sidenav-docs }}
+		</div>
+		<div class="small-12 medium-9 large-9 columns">
+			<article class="docs-content">
+				{{> body }}
+			</article>
+		</div>
+	</div>
+</div>
+
+<!-- footer -->
+{{> footer }}
+
+<!-- vendors -->
+{{> vendors }}
+	</body>
+</html>
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<!-- head -->
+{{> head }}
+
+<!-- Yeah i know js should not be in header. Its required for demos.-->
+
+<!-- javascript -->
+{{> javascripts }}
+</head>
+<body>
+<!-- header -->
+{{> header }}
+
+<!-- home panel -->
+{{> home-hero }}
+
+<!-- body -->
+{{> home-carousel }}
+
+<!-- features -->
+{{> home-features }}
+
+<!-- footer -->
+{{> home-teaser-text }}
+
+<!-- footer -->
+{{> footer }}
+
+<!-- vendors -->
+{{> vendors }}
+		
+</body>
+</html>
@@ -0,0 +1,165 @@
+---
+title: Animate Demo
+subTitle: Animate
+nav: demos
+description: Animate carousel
+sort: 3
+
+tags:
+- demo
+- plugin
+---
+
+<div class="fadeOut owl-carousel owl-theme">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+	<div class="item"><h4>7</h4></div>
+	<div class="item"><h4>8</h4></div>
+	<div class="item"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item"><h4>12</h4></div>
+</div>
+
+{{#markdown }}
+### Overview
+
+To get fade out effect just set:
+
+```
+animateOut: 'fadeOut'
+```
+
+> `fadeOut` value is the only built-in CSS animate style. However there are tons of additional CSS animations that you can use in Owl. Simply download [animate.css](https://daneden.github.io/animate.css/) library and you are ready to extend Owl with new fancy transitions.
+
+
+### Important
+Animate functions work only with one item and only in browsers that support perspective property.
+
+### How to use additional animation from `animate.css` library
+
+1. [Download animate.css](https://daneden.github.io/animate.css/)
+2. Include animate.css into header.
+3. Set `animateOut` and `animateIn` options with the style names you picked.
+
+```
+$('.custom1').owlCarousel({
+	animateOut: 'slideOutDown',
+	animateIn: 'flipInX',
+	items:1,
+	margin:30,
+	stagePadding:30,
+	smartSpeed:450
+});
+```
+Example with slideOutDown and flipInX
+{{/markdown }}
+
+<div class="custom1 owl-carousel owl-theme">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+	<div class="item"><h4>7</h4></div>
+	<div class="item"><h4>8</h4></div>
+	<div class="item"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item"><h4>12</h4></div>
+</div>
+
+{{#markdown }}
+
+### How does it work?
+
+Before animation starts three classes are added to each item:
+
+* .animated - added on both In and Out item - ive included this class from Animate.css into Owl core CSS file.
+* .owl-animated-out - only on Out item - use it to change z-index
+* .owl-animated-in - only on In item - use it to change z-index
+* .classNameOut - only on Out item - this is your custom animation class from options.
+* .classNameIn - only on In item - this is your custom animation class from options.
+
+
+Part of owl.carousel.css:
+```css
+/* Feel free to change duration  */
+
+.animated {
+  -webkit-animation-duration: 1000ms;
+  animation-duration: 1000ms;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+/* .owl-animated-out - only for current item */
+/* This is very important class. Use z-index if you want move Out item above In item */
+
+.owl-animated-out{
+  z-index: 1
+}
+
+/* .owl-animated-in - only for upcoming item
+/* This is very important class. Use z-index if you want move In item above Out item */
+
+.owl-animated-in{
+  z-index: 0
+}
+
+/* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css:  */
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+```
+
+
+{{/markdown }}
+
+<link rel="stylesheet" href="{{assets}}/css/animate.css">
+<script>
+jQuery(document).ready(function($) {
+
+	$('.fadeOut').owlCarousel({
+		items:1,
+		animateOut:'fadeOut',
+		loop:true,
+		margin:10,
+	});
+
+	$('.custom1').owlCarousel({
+		animateOut: 'slideOutDown',
+		animateIn: 'flipInX',
+		items:1,
+		margin:30,
+		stagePadding:30,
+		smartSpeed:450
+	});
+
+});
+</script>
@@ -0,0 +1,63 @@
+---
+title: Auto Height Demo
+subTitle: Auto Height
+nav: demos
+description: autoHeight usage demo
+sort: 5
+
+tags:
+- demo
+- plugin
+---
+
+<div class="owl-carousel owl-theme">
+	<div class="item" style="height:300px"><h4>1</h4></div>
+	<div class="item" style="height:100px"><h4>2</h4></div>
+	<div class="item" style="height:500px"><h4>3</h4></div>
+	<div class="item" style="height:250px"><h4>4</h4></div>
+	<div class="item" style="height:400px"><h4>5</h4></div>
+	<div class="item" style="height:500px"><h4>6</h4></div>
+	<div class="item" style="height:600px"><h4>7</h4></div>
+	<div class="item" style="height:400px"><h4>8</h4></div>
+	<div class="item" style="height:300px"><h4>9</h4></div>
+	<div class="item" style="height:350px"><h4>10</h4></div>
+	<div class="item" style="height:200px"><h4>11</h4></div>
+	<div class="item" style="height:150px"><h4>12</h4></div>
+</div>
+
+{{#markdown }}
+### Overview
+
+To enable use `autoHeight: true`. At the moment works only with 1 item on screen.
+The plan is to calculate all visible items and change height according to heighest item.
+
+```
+//default settings:
+AutoHeight.Defaults = {
+	autoHeight: false,
+	autoHeightClass: 'owl-height'
+};
+```
+
+
+### Setup
+```
+$('.owl-carousel').owlCarousel({
+	items:1,
+	margin:10,
+	autoHeight:true
+});
+
+```
+
+{{/markdown }}
+
+<script>
+$(document).ready(function(){
+	$('.owl-carousel').owlCarousel({
+		items:1,
+		margin:10,
+		autoHeight:true
+	});
+})
+</script>
@@ -0,0 +1,85 @@
+---
+title: Autoplay Demo
+subTitle: Autoplay
+nav: demos
+description: Autoplay usage demo
+sort: 4
+
+tags: 
+- demo
+- plugin
+---
+
+<div class="owl-carousel owl-theme">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+	<div class="item"><h4>7</h4></div>
+	<div class="item"><h4>8</h4></div>
+	<div class="item"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item"><h4>12</h4></div>
+</div>
+<a class="button secondary play">Play</a>
+<a class="button secondary stop">Stop</a>
+{{#markdown }}
+### Overview
+
+Autoplay plugin has three options:
+```
+//default settings:
+
+autoplay:false
+autoplayTimeout:5000
+autoplayHoverPause:false
+```
+
+In this example i've added two buttons with custom events for play and stop:
+
+```
+var owl = $('.owl-carousel');
+owl.owlCarousel({
+	items:4,
+	loop:true,
+	margin:10,
+	autoplay:true,
+	autoplayTimeout:1000,
+	autoplayHoverPause:true
+});
+
+$('.play').on('click',function(){
+	owl.trigger('play.owl.autoplay',[1000])
+})
+
+$('.stop').on('click',function(){
+	owl.trigger('stop.owl.autoplay')
+})
+```
+
+{{/markdown }} 
+
+<script>
+$(document).ready(function(){
+	var owl = $('.owl-carousel');
+	owl.owlCarousel({
+		items:4,
+		loop:true,
+		margin:10,
+		autoplay:true,
+		autoplayTimeout:1000,
+		autoplayHoverPause:true
+	});
+
+	$('.play').on('click',function(){
+		owl.trigger('play.owl.autoplay',[1000])
+	})
+
+	$('.stop').on('click',function(){
+		owl.trigger('stop.owl.autoplay')
+	})
+})
+</script>
@@ -0,0 +1,75 @@
+---
+title: Auto Width Demo
+subTitle: Auto Width
+nav: demos
+description: Auto Width 
+sort: 6
+
+tags: 
+- demo
+- core
+---
+
+<div class="owl-carousel owl-theme">
+	<div class="item" style="width:250px"><h4>1</h4></div>
+	<div class="item" style="width:100px"><h4>2</h4></div>
+	<div class="item" style="width:500px"><h4>3</h4></div>
+	<div class="item" style="width:100px"><h4>4</h4></div>
+	<div class="item" style="width:50px"><h4>6</h4></div>
+	<div class="item" style="width:250px"><h4>7</h4></div>
+	<div class="item" style="width:120px"><h4>8</h4></div>
+	<div class="item" style="width:420px"><h4>9</h4></div>
+	<div class="item" style="width:120px"><h4>10</h4></div>
+	<div class="item" style="width:300px"><h4>11</h4></div>
+	<div class="item" style="width:450px"><h4>12</h4></div>
+	<div class="item" style="width:220px"><h4>13</h4></div>
+	<div class="item" style="width:150px"><h4>14</h4></div>
+	<div class="item" style="width:600px"><h4>15</h4></div>
+</div>
+
+{{#markdown }}
+### Overview
+
+Use width style on elements to get the result you want. If using with infinity loop add option 'items' more than 1. It all depends on the width of your content.
+
+### Setup
+```
+$('.owl-carousel').owlCarousel({
+	margin:10,
+	loop:true,
+	autoWidth:true,
+	items:4
+})
+```
+### html
+```
+<div class="owl-carousel owl-theme">
+	<div class="item" style="width:250px"><h4>1</h4></div>
+	<div class="item" style="width:100px"><h4>2</h4></div>
+	<div class="item" style="width:500px"><h4>3</h4></div>
+	<div class="item" style="width:100px"><h4>4</h4></div>
+	<div class="item" style="width:50px"><h4>6</h4></div>
+	<div class="item" style="width:250px"><h4>7</h4></div>
+	<div class="item" style="width:120px"><h4>8</h4></div>
+	<div class="item" style="width:420px"><h4>9</h4></div>
+	<div class="item" style="width:120px"><h4>10</h4></div>
+	<div class="item" style="width:300px"><h4>11</h4></div>
+	<div class="item" style="width:450px"><h4>12</h4></div>
+	<div class="item" style="width:220px"><h4>13</h4></div>
+	<div class="item" style="width:150px"><h4>14</h4></div>
+	<div class="item" style="width:600px"><h4>15</h4></div>
+</div>
+```
+
+{{/markdown }} 
+
+<script>
+$(document).ready(function(){
+	$('.owl-carousel').owlCarousel({
+		margin:10,
+		loop:true,
+		autoWidth:true,
+		items:4
+	})
+})
+</script>
@@ -0,0 +1,95 @@
+---
+title: Basic Demo
+subTitle: Basic
+nav: demos
+description: Basic usage demo
+sort: 1
+
+tags: 
+- demo
+- core
+---
+
+<div class="owl-carousel owl-theme">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+	<div class="item"><h4>7</h4></div>
+	<div class="item"><h4>8</h4></div>
+	<div class="item"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item"><h4>12</h4></div>
+</div>
+
+{{#markdown }}
+### Overview
+
+Basic usage of Owl Carousel. I used `loop:true` and `margin:10`. The structure works with any kind of DOM element. In all of my examples i used `<div class="item">...</div>` but you could put any other element `div/span/a/img...`
+
+### Setup
+```
+$('.owl-carousel').owlCarousel({
+	loop:true,
+	margin:10,
+	nav:true,
+	responsive:{
+		0:{
+			items:1
+		},
+		600:{
+			items:3
+		},
+		1000:{
+			items:5
+		}
+	}
+})
+```
+### html
+```
+<div class="owl-carousel owl-theme">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+	<div class="item"><h4>7</h4></div>
+	<div class="item"><h4>8</h4></div>
+	<div class="item"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item"><h4>12</h4></div>
+</div>
+```
+
+{{/markdown }} 
+
+<script>
+$(document).ready(function(){
+	var owl = $('.owl-carousel');
+
+	owl.owlCarousel({
+		margin:10,
+		nav:true,
+		loop:true,
+		responsive:{
+			0:{
+				items:1
+			},
+			600:{
+				items:3
+			},
+			1000:{
+				items:5
+			}
+		}
+	})
+})
+
+
+</script>
@@ -0,0 +1,116 @@
+---
+title: Center Demo
+subTitle: Center
+nav: demos
+description: Center carousel
+sort: 3
+
+tags: 
+- demo
+- core
+---
+{{#markdown }}
+#### Center with loop
+{{/markdown }}
+
+<div class="loop owl-carousel owl-theme">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+	<div class="item"><h4>7</h4></div>
+	<div class="item"><h4>8</h4></div>
+	<div class="item"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item"><h4>12</h4></div>
+</div>
+
+<br>
+{{#markdown }}
+#### Center without loop
+{{/markdown }}
+
+<div class="nonloop owl-carousel">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+	<div class="item"><h4>7</h4></div>
+	<div class="item"><h4>8</h4></div>
+	<div class="item"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item"><h4>12</h4></div>
+</div>
+
+
+{{#markdown }}
+### Overview
+
+> Works well with odd and even items on screen. Keep in mind that dots are not working here like a pagination.
+
+Add center to setup:
+```
+center:true
+```
+
+### Setup
+```
+$('.loop').owlCarousel({
+	center: true,
+	items:2,
+	loop:true,
+	margin:10,
+	responsive:{
+		600:{
+			items:4
+		}
+	}
+});
+
+$('.nonloop').owlCarousel({
+	center: true,
+	items:2,
+	loop:false,
+	margin:10,
+	responsive:{
+		600:{
+			items:4
+		}
+	}
+});
+```
+{{/markdown }}
+<script>
+jQuery(document).ready(function($) {
+
+	$('.loop').owlCarousel({
+		center: true,
+		items:2,
+		loop:true,
+		margin:10,
+		responsive:{
+			600:{
+				items:4
+			}
+		}
+	});
+
+	$('.nonloop').owlCarousel({
+		center: true,
+		items:2,
+		loop:false,
+		margin:10,
+		responsive:{
+			600:{
+				items:4
+			}
+		}
+	});
+});
+</script>
@@ -0,0 +1,73 @@
+---
+title: Demos
+subTitle: Demos
+nav: demos
+description: A list of Owl Carousel examples.
+note: Please note that this is a beta version only for testing purposes. Enjoy!
+---
+
+{{#markdown }}
+#### Basic demos:
+
+-----
+{{/markdown }}
+
+<div class="demo-list">
+	<div class="row">
+		{{#each tags}}
+			{{#is tag "core"}}
+				{{#withSort pages "data.sort"}}
+					<div class="small-6 medium-4 large-3 columns">
+						<a href="{{basename }}.html" class="demo-block">
+							<h5>{{data.subTitle}} </h5>
+						</a>
+					</div>
+				{{/withSort}}
+			{{/is}}
+		{{/each}}
+	</div>
+</div>
+
+{{#markdown }}
+#### Using built-in plugins
+
+-----
+{{/markdown }}
+
+<div class="demo-list">
+	<div class="row">
+		{{#each tags}}
+			{{#is tag "plugin"}}
+				{{#withSort pages "data.sort"}}
+					<div class="small-6 medium-4 large-3 columns">
+						<a href="{{basename }}.html" class="demo-block">
+							<h5>{{data.subTitle}} </h5>
+						</a>
+					</div>
+				{{/withSort}}
+			{{/is}}
+		{{/each}}
+	</div>
+</div>
+
+{{#markdown }}
+#### Using external libraries
+
+-----
+{{/markdown }}
+
+<div class="demo-list">
+	<div class="row">
+		{{#each tags}}
+			{{#is tag "external"}}
+				{{#withSort pages "data.sort"}}
+					<div class="small-6 medium-4 large-3 columns">
+						<a href="{{basename }}.html" class="demo-block">
+							<h5>{{data.subTitle}} </h5>
+						</a>
+					</div>
+				{{/withSort}}
+			{{/is}}
+		{{/each}}
+	</div>
+</div>
@@ -0,0 +1,103 @@
+---
+title: Events Demo
+subTitle: Events
+nav: demos
+description: Events usage demo
+sort: 7
+published: true
+
+tags: 
+- demo
+- core
+---
+
+<div class="owl-carousel owl-theme">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+	<div class="item"><h4>7</h4></div>
+	<div class="item"><h4>8</h4></div>
+	<div class="item"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item"><h4>12</h4></div>
+</div>
+<hr>
+<div class="large-12 columns callbacks">
+	<div><span class="label secondary initialize">on</span> initialize.owl.carousel </div>
+	<div><span class="label secondary initialized">on</span> initialized.owl.carousel </div>
+	<div><span class="label secondary resize">on</span> resize.owl.carousel </div>
+	<div><span class="label secondary resized">on</span> resized.owl.carousel </div>
+	<div><span class="label secondary refresh">on</span> refresh.owl.carousel </div>
+	<div><span class="label secondary refreshed">on</span> refreshed.owl.carousel </div>
+	<div><span class="label secondary update">on</span> update.owl.carousel </div>
+	<div><span class="label secondary updated">on</span> updated.owl.carousel </div>
+	<div><span class="label secondary drag">on</span> drag.owl.carousel </div>
+	<div><span class="label secondary dragged">on</span> dragged.owl.carousel </div>
+	<div><span class="label secondary translate">on</span> translate.owl.carousel </div>
+	<div><span class="label secondary translated">on</span> translated.owl.carousel </div>
+	<div><span class="label secondary to">on</span> to.owl.carousel </div>
+	<div><span class="label secondary changed">on</span> changed.owl.carousel </div>
+</div>
+
+
+{{#markdown }}
+### Overview
+
+Notice that `initialize.owl.carousel` and `initialized.owl.carousel` events must be attached before Owl Carousel initialization. This is required only for those two.
+
+`changed.owl.carousel` event is attached to the main Owl Carousel animation method so that every carousel move triggers this callback.
+
+{{/markdown }} 
+
+<script>
+jQuery(document).ready(function($) {
+
+	var owl = $('.owl-carousel');
+	
+	owl.on('initialize.owl.carousel initialized.owl.carousel ' +
+		'initialize.owl.carousel initialize.owl.carousel ' +
+		'resize.owl.carousel resized.owl.carousel ' + 
+		'refresh.owl.carousel refreshed.owl.carousel ' + 
+		'update.owl.carousel updated.owl.carousel ' + 
+		'drag.owl.carousel dragged.owl.carousel ' + 
+		'translate.owl.carousel translated.owl.carousel ' + 
+		'to.owl.carousel changed.owl.carousel', function(e){
+		$('.' + e.type)
+			.removeClass('secondary')
+			.addClass('success');
+
+		window.setTimeout(function(){
+			$('.' + e.type)
+				.removeClass('success')
+				.addClass('secondary');
+		},500);
+	});
+
+	owl.owlCarousel({
+		loop:true,
+		nav:true,
+		lazyLoad:true,
+		margin:10,
+		video:true,
+		responsive:{
+			0:{
+				items:1
+			},
+			600:{
+				items:3
+			},			
+			960:{
+				items:5,
+			},
+			1200:{
+				items:6
+			}
+		}
+	});
+});
+
+</script>
@@ -0,0 +1,93 @@
+---
+title: Lazy Load Demo
+subTitle: Lazy Load
+nav: demos
+description: Lazy Load carousel
+sort: 1
+
+tags:
+- demo
+- plugin
+---
+
+<div class="owl-carousel owl-theme">
+  <img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
+  <img class="owl-lazy" data-src="https://placehold.it/350x350&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
+  <picture>
+    <source class="owl-lazy" media="(min-width: 650px)" data-srcset="https://placehold.it/350x250&text=3-large">
+    <source class="owl-lazy" media="(min-width: 350px)" data-srcset="https://placehold.it/350x250&text=3-medium">
+    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3-fallback" alt="">
+  </picture>
+  <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
+  <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
+  <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
+  <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
+  <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
+  <img class="owl-lazy" data-src="https://placehold.it/350x400&text=9" alt="">
+  <img class="owl-lazy" data-src="https://placehold.it/350x400&text=10" alt="">
+  <img class="owl-lazy" data-src="https://placehold.it/350x450&text=11" alt="">
+</div>
+
+
+{{#markdown }}
+### Overview
+
+Add lazyLoad to plugin setup:
+```
+lazyLoad: true
+```
+LazyLoad HTML structure requires `class="owl-lazy"` and `data-src="url_to_img"` or/and `data-src-retina="url_to_highres_img"`.
+If you set above settings not on `<img>` but on other DOM element then Owl will load an image into css inline background style.
+You can even use picture tags with different sources by adding the `owl-lazy` class to the source tag and a data-srcset attribute.
+
+### Setup
+```
+$('.owl-carousel').owlCarousel({
+	items:4,
+	lazyLoad:true,
+	loop:true,
+	margin:10
+});
+```
+
+### Option
+
+If you want to preload images you can also add the option ```lazyLoadEager``` to the settings object, where the value
+indicates how many items to the right (and left, when loop is ```true```) will be pre-loaded.
+
+### HTML:
+
+```
+<div class="owl-carousel owl-theme">
+	<img class="owl-lazy" data-src="https://placehold.it/350x450&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
+	<img class="owl-lazy" data-src="https://placehold.it/350x650&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
+  <picture>
+      <source class="owl-lazy" media="(min-width: 650px)" data-srcset="https://placehold.it/350x250&text=3-large">
+      <source class="owl-lazy" media="(min-width: 350px)" data-srcset="https://placehold.it/350x250&text=3-medium">
+      <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3-fallback" alt="">
+  </picture>
+	<img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
+	<img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
+	<img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
+	<img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
+	<img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
+	<img class="owl-lazy" data-src="https://placehold.it/350x400&text=9" alt="">
+	<img class="owl-lazy" data-src="https://placehold.it/350x400&text=10" alt="">
+	<img class="owl-lazy" data-src="https://placehold.it/350x450&text=11" alt="">
+</div>
+```
+
+
+{{/markdown }}
+<script>
+jQuery(document).ready(function($) {
+	$('.owl-carousel').owlCarousel({
+		items:1,
+		lazyLoad:true,
+    lazyLoadEager: 1,
+		loop:true,
+		margin:10,
+    autoHeight: true
+	});
+});
+</script>
@@ -0,0 +1,92 @@
+---
+title: Merge Demo
+subTitle: Merge
+nav: demos
+description: Merge Items
+sort: 5
+
+tags: 
+- demo
+- core
+---
+
+<div class="owl-carousel owl-theme">
+	<div class="item" data-merge="1"><h4>1</h4></div>
+	<div class="item" data-merge="2"><h4>2</h4></div>
+	<div class="item" data-merge="1"><h4>3</h4></div>
+	<div class="item" data-merge="3"><h4>4</h4></div>
+	<div class="item" data-merge="6"><h4>6</h4></div>
+	<div class="item" data-merge="2"><h4>7</h4></div>
+	<div class="item" data-merge="1"><h4>8</h4></div>
+	<div class="item" data-merge="3"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item" data-merge="2"><h4>12</h4></div>
+	<div class="item"><h4>13</h4></div>
+	<div class="item"><h4>14</h4></div>
+	<div class="item"><h4>15</h4></div>
+</div>
+
+{{#markdown }}
+### Overview
+Merge option requires `data-merge="number_items_to_merge"` on any child element (can be nested as well). There is a sibling option called `mergeFit` which fits merged elements to screen size. 
+
+See item 6 on breakpoint below and above `1000px` screen width.
+
+### Setup
+```
+$('.owl-carousel').owlCarousel({
+	items:5,
+	loop:true,
+	margin:10,
+	merge:true,
+	responsive:{
+		678:{
+			mergeFit:true
+		},
+		1000:{
+			mergeFit:false
+		}
+	}
+});
+```
+### html
+```
+<div class="owl-carousel owl-theme">
+	<div class="item" data-merge="1"><h2>1</h2></div>
+	<div class="item" data-merge="2"><h2>2</h2></div>
+	<div class="item" data-merge="1"><h2>3</h2></div>
+	<div class="item" data-merge="3"><h2>4</h2></div>
+	<div class="item" data-merge="6"><h2>6</h2></div>
+	<div class="item" data-merge="2"><h2>7</h2></div>
+	<div class="item" data-merge="1"><h2>8</h2></div>
+	<div class="item" data-merge="3"><h2>9</h2></div>
+	<div class="item"><h2>10</h2></div>
+	<div class="item"><h2>11</h2></div>
+	<div class="item" data-merge="2"><h2>12</h2></div>
+	<div class="item"><h2>13</h2></div>
+	<div class="item"><h2>14</h2></div>
+	<div class="item"><h2>15</h2></div>
+</div>
+```
+
+{{/markdown }} 
+
+<script>
+$(document).ready(function(){
+	$('.owl-carousel').owlCarousel({
+		items:5,
+		loop:true,
+		margin:10,
+		merge:true,
+		responsive:{
+			678:{
+				mergeFit:true
+			},
+			1000:{
+				mergeFit:false
+			}
+		}
+	});
+})
+</script>
@@ -0,0 +1,109 @@
+---
+title: Mousewheel Demo
+subTitle: Mousewheel
+nav: demos
+description: Mousewheel usage demo
+sort: 1
+
+tags: 
+- demo
+- external
+---
+
+<div class="owl-carousel owl-theme">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+	<div class="item"><h4>7</h4></div>
+	<div class="item"><h4>8</h4></div>
+	<div class="item"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item"><h4>12</h4></div>
+</div>
+
+{{#markdown }}
+### Overview
+
+To add mouswheel scrolling just include the fantastic plugin jquery.mousewheel.js created by Brandon Aaron. 
+[Link to plugin GitHub page](https://github.com/brandonaaron/jquery-mousewheel)
+
+
+
+### Setup
+```
+var owl = $('.owl-carousel');
+
+owl.owlCarousel({
+	loop:true,
+	nav:true,
+	margin:10,
+	responsive:{
+		0:{
+			items:1
+		},
+		600:{
+			items:3
+		},			
+		960:{
+			items:5
+		},
+		1200:{
+			items:6
+		}
+	}
+});
+
+owl.on('mousewheel', '.owl-stage', function (e) {
+    if (e.deltaY>0) {
+		owl.trigger('next.owl');
+    } else {
+		owl.trigger('prev.owl');
+    }
+    e.preventDefault();
+});
+
+```
+
+{{/markdown }} 
+
+<script src="{{assets}}/vendors/jquery.mousewheel.min.js"></script>
+<script>
+$(document).ready(function(){
+	var owl = $('.owl-carousel');
+
+	owl.owlCarousel({
+		loop:true,
+		nav:true,
+		margin:10,
+		responsive:{
+			0:{
+				items:1
+			},
+			600:{
+				items:3
+			},			
+			960:{
+				items:5
+			},
+			1200:{
+				items:6
+			}
+		}
+	});
+
+	owl.on('mousewheel', '.owl-stage', function (e) {
+	    if (e.deltaY>0) {
+			owl.trigger('next.owl');
+	    } else {
+			owl.trigger('prev.owl');
+	    }
+	    e.preventDefault();
+	});
+})
+
+
+</script>
@@ -0,0 +1,214 @@
+---
+title: Responsive Demo
+subTitle: Responsive
+nav: demos
+description: How to use responsive options
+sort: 2
+
+tags:
+- demo
+- core
+---
+
+<div class="owl-carousel owl-theme">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+	<div class="item"><h4>7</h4></div>
+	<div class="item"><h4>8</h4></div>
+	<div class="item"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item"><h4>12</h4></div>
+</div>
+
+{{#markdown }}
+### Overview
+
+> Responsive option can be used for setting breakpoints and additional options within. Try changing your browser width to see what happens with Items and Navigations.
+
+
+#### About responsive option
+
+Setting of the responsive is very simple. Structure of responsive option:
+
+```
+responsive : {
+
+	// breakpoint from 0 up
+	0 : {
+		option1 : value,
+		option2 : value,
+		...
+	},
+
+	// breakpoint from 480 up
+	480 : {
+		option1 : value,
+		option2 : value,
+		...
+	},
+
+	// breakpoint from 768 up
+	768 : {
+		option1 : value,
+		option2 : value,
+		...
+	}
+}
+
+```
+
+### Key facts:
+
+* Each breakpoint key can be a Number value (like in example) or a string: '480'.
+* Owl has an in-built sort option but  it’s best to set from the smallest screens to the widest.
+* Responsive options **always** overwrite top level settings.
+* As default, the responsive option is set to true so carousel always tries to fit the wrapper (even if media queries are not support IE7/IE8 etc).
+* If you have non flexible layout then set `responsive:false`.
+
+
+### Live Example
+```
+$('.owl-carousel').owlCarousel({
+	loop:true,
+	margin:10,
+	responsiveClass:true,
+
+	responsive:{
+		0:{
+			items:1,
+			nav:true
+		},
+		600:{
+			items:3,
+			nav:false
+		},
+		1000:{
+			items:5,
+			nav:true,
+			loop:false
+		}
+	}
+})
+```
+
+----
+
+### Responsive related options:
+
+
+#### responsiveClass
+
+Optional helper class. Add 'owl-reponsive-' + 'breakpoint' class to main element.
+
+
+#### responsiveBaseElement
+
+As default all responsive breakpoints are corresponding with `window` width. This option gives you an opportunity to change it to your own class/id like `responsiveBaseElement:".myCustomWrapper"`
+
+#### responsiveRefreshRate
+
+What this does is wait 200ms after you changed the browser width and performs refresh actions (calculating widths/ cloning items etc.) Default refresh rate is 200ms. I think this rate is optimal but you can change it if it’s to slow for you.
+
+As not every option is able to use responsive abilities, here’s a full list of responsive options.
+
+<div class="row">
+<div class="large-6 columns">
+
+
+#### List of responsive options
+
+* items
+* loop
+* center
+* mouseDrag
+* touchDrag
+* pullDrag
+* freeDrag
+* margin
+* stagePadding
+* merge
+* mergeFit
+* autoWidth
+* autoHeight
+* nav
+* navRewind
+* slideBy
+* dots
+* dotsEach
+* autoplay
+* autoplayTimeout
+* smartSpeed
+* fluidSpeed
+* autoplaySpeed
+* navSpeed
+* dotsSpeed
+* dragEndSpeed
+* responsiveRefreshRate
+* animateOut
+* animateIn
+* fallbackEasing
+* callbacks
+* info
+* and all events
+{{/markdown }}
+
+</div>
+<div class="large-6 columns">
+
+{{#markdown }}
+#### List of responsive only on load
+
+* startPosition
+* URLhashListener
+* navText
+* dotsData
+* lazyLoad
+* lazyContent
+* autoplayHoverPause
+* responsiveBaseElement
+* responsiveClass
+* video
+* videoHeight
+* videoWidth
+* nestedItemSelector
+* itemElement
+* stageElement
+* navContainer
+* dotsContainer
+* and all classes options
+{{/markdown }}
+</div>
+</div>
+
+
+<script>
+$(document).ready(function(){
+	$('.owl-carousel').owlCarousel({
+		loop:true,
+		margin:10,
+		responsiveClass:true,
+
+		responsive:{
+			0:{
+				items:1,
+				nav:true
+			},
+			600:{
+				items:3,
+				nav:false
+			},
+			1000:{
+				items:5,
+				nav:true,
+				loop:false,
+				margin:20
+			}
+		}
+	})
+})
+</script>
@@ -0,0 +1,102 @@
+---
+title: RTL Demo
+subTitle: Right To Left
+nav: demos
+description: RTL usage demo
+sort: 9
+
+tags: 
+- demo
+- core
+---
+
+<div class="owl-carousel owl-theme">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+	<div class="item"><h4>7</h4></div>
+	<div class="item"><h4>8</h4></div>
+	<div class="item"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item"><h4>12</h4></div>
+</div>
+
+{{#markdown }}
+### Overview
+
+By adding `rtl:true` Owl will change direction from Right to left.
+
+Default:
+```
+rtl: false
+```
+
+### Setup
+```
+$('.owl-carousel').owlCarousel({
+	rtl:true,
+	loop:true,
+	margin:10,
+	nav:true,
+	responsive:{
+		0:{
+			items:1
+		},
+		600:{
+			items:3
+		},
+		1000:{
+			items:5
+		}
+	}
+})
+```
+### html
+```
+<div class="owl-carousel owl-theme">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+	<div class="item"><h4>7</h4></div>
+	<div class="item"><h4>8</h4></div>
+	<div class="item"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item"><h4>12</h4></div>
+</div>
+```
+
+{{/markdown }} 
+
+<script>
+$(document).ready(function(){
+	var owl = $('.owl-carousel');
+
+	owl.owlCarousel({
+		rtl:true,
+		margin:10,
+		nav:true,
+		loop:true,
+		responsive:{
+			0:{
+				items:1
+			},
+			600:{
+				items:3
+			},
+			1000:{
+				items:5
+			}
+		}
+	})
+})
+
+
+</script>
@@ -0,0 +1,102 @@
+---
+title: Stage Padding Demo
+subTitle: stagePadding
+nav: demos
+description: Stage Padding usage demo
+sort: 8
+
+tags: 
+- demo
+- core
+---
+
+<div class="owl-carousel owl-theme">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+	<div class="item"><h4>7</h4></div>
+	<div class="item"><h4>8</h4></div>
+	<div class="item"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item"><h4>12</h4></div>
+</div>
+
+{{#markdown }}
+### Overview
+
+Stage padding option adds left and right padding style (in pixels) onto stage-wrapper.
+
+Option:
+```
+stagePadding: Number
+```
+
+### Setup
+```
+$('.owl-carousel').owlCarousel({
+	stagePadding: 50,
+	loop:true,
+	margin:10,
+	nav:true,
+	responsive:{
+		0:{
+			items:1
+		},
+		600:{
+			items:3
+		},
+		1000:{
+			items:5
+		}
+	}
+})
+```
+### html
+```
+<div class="owl-carousel owl-theme">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+	<div class="item"><h4>7</h4></div>
+	<div class="item"><h4>8</h4></div>
+	<div class="item"><h4>9</h4></div>
+	<div class="item"><h4>10</h4></div>
+	<div class="item"><h4>11</h4></div>
+	<div class="item"><h4>12</h4></div>
+</div>
+```
+
+{{/markdown }} 
+
+<script>
+$(document).ready(function(){
+	var owl = $('.owl-carousel');
+
+	owl.owlCarousel({
+		stagePadding: 50,
+		margin:10,
+		nav:true,
+		loop:true,
+		responsive:{
+			0:{
+				items:1
+			},
+			600:{
+				items:3
+			},
+			1000:{
+				items:5
+			}
+		}
+	})
+})
+
+
+</script>
@@ -0,0 +1,43 @@
+---
+title: Test
+subTitle: Test
+nav: test
+description: Generic layout only for testing
+
+categories:
+- test
+
+---
+
+<div class="owl-carousel owl-theme">
+	<div class="item"><h4>1</h4></div>
+	<div class="item"><h4>2</h4></div>
+	<div class="item"><h4>3</h4></div>
+	<div class="item"><h4>4</h4></div>
+	<div class="item"><h4>5</h4></div>
+	<div class="item"><h4>6</h4></div>
+</div>
+
+
+<script>
+$(document).ready(function(){
+	var owl = $('.owl-carousel');
+
+	owl.owlCarousel({
+		loop:true,
+		margin:10,
+		navRewind:false,
+		responsive:{
+			0:{
+				items:1
+			},
+			600:{
+				items:3
+			},
+			1000:{
+				items:5
+			}
+		}
+	})
+})
+</script>
@@ -0,0 +1,73 @@
+---
+title: Url Hash Navigation Demo
+subTitle: Url Hash Navigation
+nav: demos
+description: Url Hash Navigation usage demo
+sort: 6
+
+tags: 
+- demo
+- core
+---
+
+<div class="owl-carousel owl-theme">
+	<div class="item" data-hash="zero"><h4>0</h4></div>
+	<div class="item" data-hash="one" ><h4>1</h4></div>
+	<div class="item" data-hash="two" ><h4>2</h4></div>
+	<div class="item" data-hash="three" ><h4>3</h4></div>
+	<div class="item" data-hash="four"><h4>4</h4></div>
+	<div class="item" data-hash="five" ><h4>5</h4></div>
+	<div class="item" data-hash="six"><h4>6</h4></div>
+	<div class="item" data-hash="seven" ><h4>7</h4></div>
+	<div class="item" data-hash="eight" ><h4>8</h4></div>
+	<div class="item" data-hash="nine" ><h4>9</h4></div>
+	<div class="item" data-hash="ten" ><h4>10</h4></div>
+	<div class="item" data-hash="eleven" ><h4>11</h4></div>
+	<div class="item" data-hash="tweleve" ><h4>12</h4></div>
+	<div class="item" data-hash="thirteen" ><h4>13</h4></div>
+	<div class="item" data-hash="fourteen" ><h4>14</h4></div>
+	<div class="item" data-hash="fifteen" ><h4>15</h4></div>
+</div>
+<hr>
+<a class="button secondary url" href="#zero">zero</a>
+<a class="button secondary url" href="#three">three</a>
+<a class="button secondary url" href="#five">five</a>
+<a class="button secondary url" href="#seven">seven</a>
+<a class="button secondary url" href="#ten">ten</a>
+
+
+{{#markdown }}
+### Overview
+
+> URLhashListener option is listening for url hash change and is looking for slide with the same data name e.g. `data-hash="zero"`
+
+Also `startPosition` option accept string: `'URLHash'`. This will load corresponding items on startup. Browser history back button is also affected.
+
+### Setup
+```
+	$('.owl-carousel').owlCarousel({
+		items:4,
+		loop:false,
+		center:true,
+		margin:10,
+		URLhashListener:true,
+		autoplayHoverPause:true,
+		startPosition: 'URLHash'
+	});
+```
+{{/markdown }} 
+
+<script>
+$(document).ready(function(){
+	$('.owl-carousel').owlCarousel({
+		items:4,
+		loop:false,
+		center:true,
+		margin:10,
+		callbacks:true,
+		URLhashListener:true,
+		autoplayHoverPause:true,
+		startPosition: 'URLHash'
+	});
+})
+</script>
@@ -0,0 +1,99 @@
+---
+title: Video Demo
+subTitle: Video
+nav: demos
+description: Owl Carousel supports YouTube, Vimeo, and vzaar videos
+sort: 2
+
+tags:
+- demo
+- plugin
+---
+
+<div class="owl-carousel owl-theme">
+	<div class="item-video" data-merge="3"><a class="owl-video" href="https://vimeo.com/23924346"></a></div>
+	<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>
+	<div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div>
+	<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=oy18DJwy5lI"></a></div>
+	<div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=H3jLkJrhHKQ"></a></div>
+	<div class="item-video" data-merge="3"><a class="owl-video" href="https://www.youtube.com/watch?v=g3J4VxWIM6s"></a></div>
+	<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=0fhoIate4qI"></a></div>
+	<div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=EF_kj2ojZaE"></a></div>
+</div>
+
+{{#markdown }}
+### Overview
+
+Enable video option:
+```
+video:true
+```
+To add video into carousel just put `<a class="owl-video" href="_straight URL from YouTube, Vimeo, or vzaar"></a>`.
+
+A tag is not mandatory, it can be any other tag but "owl-video" and href with url link is required.
+
+
+Additional video options:
+
+```
+videoWidth: false, // Default false; Type: Boolean/Number
+videoHeight: false, // Default false; Type: Boolean/Number
+```
+
+### Setup
+```
+	$('.owl-carousel').owlCarousel({
+		items:1,
+		merge:true,
+		loop:true,
+		margin:10,
+		video:true,
+		lazyLoad:true,
+		center:true,
+		responsive:{
+			480:{
+				items:2
+			},
+			600:{
+				items:4
+			}
+		}
+	})
+```
+### html
+```
+<div class="owl-carousel owl-theme">
+	<div class="item-video" data-merge="3"><a class="owl-video" href="https://vimeo.com/23924346"></a></div>
+	<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>
+	<div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div>
+	<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=oy18DJwy5lI"></a></div>
+	<div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=H3jLkJrhHKQ"></a></div>
+	<div class="item-video" data-merge="3"><a class="owl-video" href="https://www.youtube.com/watch?v=g3J4VxWIM6s"></a></div>
+	<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=0fhoIate4qI"></a></div>
+	<div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=EF_kj2ojZaE"></a></div>
+</div>
+```
+
+{{/markdown }}
+
+<script>
+$(document).ready(function(){
+	$('.owl-carousel').owlCarousel({
+		items:1,
+		merge:true,
+		loop:true,
+		margin:10,
+		video:true,
+		lazyLoad:true,
+		center:true,
+		responsive:{
+			480:{
+				items:2
+			},
+			600:{
+				items:4
+			}
+		}
+	})
+})
+</script>
@@ -0,0 +1,58 @@
+---
+title: Classes
+subTitle: API
+nav: docs
+description: Owl Carousel Documentation
+
+sort: 2
+tags:
+- API
+---
+
+{{#markdown }}
+## Classes
+
+This is an example of how html is rendered. With the following options you can change almost every class the way you want
+
+
+```
+<div class="owl-carousel owl-theme owl-loaded">
+    <div class="owl-stage-outer">
+        <div class="owl-stage">
+            <div class="owl-item">...</div>
+            <div class="owl-item">...</div>
+            <div class="owl-item">...</div>
+        </div>
+    </div>
+    <div class="owl-nav">
+        <div class="owl-prev">prev</div>
+        <div class="owl-next">next</div>
+    </div>
+    <div class="owl-dots">
+        <div class="owl-dot active"><span></span></div>
+        <div class="owl-dot"><span></span></div>
+        <div class="owl-dot"><span></span></div>
+    </div>
+</div>
+```
+### Options
+
+{{#each classes}}
+#### {{name}}
+
+Type: `{{type}}`<br />
+Default: `{{Default}}`
+
+{{desc}}
+
+------
+{{/each}}
+
+
+
+### Next Step
+
+####[Events](api-events.html)
+
+{{/markdown }}
+
@@ -0,0 +1,96 @@
+---
+title: Events
+subTitle: API
+nav: docs
+description: Owl Carousel Documentation
+
+sort: 3
+tags:
+- API
+---
+
+{{#markdown }}
+## Events
+
+> Events are provided by Owl Carousel in strategic code locations. This gives you the ability to listen for any changes and perform your own actions.
+
+```
+var owl = $('.owl-carousel');
+owl.owlCarousel();
+
+// Listen to owl events:
+owl.on('changed.owl.carousel', function(event) {
+	...
+})
+
+```
+
+You could also trigger events by yourself to control Owl Carousel:
+
+```
+var owl = $('.owl-carousel');
+owl.owlCarousel();
+
+// Go to the next item
+$('.customNextBtn').click(function() {
+	owl.trigger('next.owl.carousel');
+})
+
+// Go to the previous item
+$('.customPrevBtn').click(function() {
+	// With optional speed parameter
+	// Parameters has to be in square bracket '[]'
+	owl.trigger('prev.owl.carousel', [300]);
+})
+
+```
+
+### Callbacks
+
+Instead of attaching an event handler you can also just add a callback to the options of Owl Carousel.
+
+```
+$('.owl-carousel').owlCarousel({
+	onDragged: callback
+});
+
+function callback(event) {
+	...
+}
+```
+
+### Data
+
+Each event passes very useful information within the [event object](https://api.jquery.com/category/events/event-object/). Based on the example above:
+
+```Javascript
+function callback(event) {
+	// Provided by the core
+	var element   = event.target;         // DOM element, in this example .owl-carousel
+	var name      = event.type;           // Name of the event, in this example dragged
+	var namespace = event.namespace;      // Namespace of the event, in this example owl.carousel
+	var items     = event.item.count;     // Number of items
+	var item      = event.item.index;     // Position of the current item
+	// Provided by the navigation plugin
+	var pages     = event.page.count;     // Number of pages
+	var page      = event.page.index;     // Position of the current page
+	var size      = event.page.size;      // Number of items per page
+}
+```
+
+{{#each events}}
+### {{namespace}}
+
+{{#each events}}
+#### {{name}}
+
+Type: `{{type}}`<br />{{#isnt callback undefined}}Callback: `{{callback}}`<br/>{{/isnt}}{{#isnt param undefined}}Parameter: `{{param}}`<br/>{{/isnt}}
+
+{{desc}}
+
+------
+{{/each}}
+
+{{/each}}
+
+{{/markdown }}
@@ -0,0 +1,34 @@
+---
+title: Options
+subTitle: API
+nav: docs
+description: Owl Carousel Documentation
+
+sort: 1
+tags:
+- API
+---
+
+{{#markdown }}
+
+## Options
+
+> List including all options from built-in plugins video, lazyload, autoheight and animate.
+
+{{#each options}}
+#### {{name}}
+
+Type: `{{type}}`<br />
+Default: `{{Default}}`
+
+{{desc}}
+
+------
+{{/each}}
+
+### Next Step
+
+####[Classes](api-classes.html)
+
+{{/markdown }}
+
@@ -0,0 +1,123 @@
+---
+title: Built-in Plugins
+subTitle: Development
+nav: docs
+description: Owl Carousel Documentation
+
+sort: 1
+tags:
+- Development
+---
+
+{{#markdown }}
+## Built-in Plugins
+> Owl Carousel supports plugin modular structure. This means that you can remove plugins that you won’t use or create new ones that fit your needs
+
+
+
+### Plugins included
+
+Following javascript files are concatenated in distributed owl.carousel.js and owl.carousel.min.js version. If you are looking for individual scripts please visit [Github]({{ pkg.homepage }}) and fork/download the source project
+
+
+```
+src/
+└── js/
+	├── owl.animate.js
+    ├── owl.autoplay.js
+    ├── owl.autoheight.js
+    ├── owl.carousel.js
+    ├── owl.hash.js
+    ├── owl.lazyload.js
+    ├── owl.navigation.js
+    └── owl.video.js
+```
+
+> [See demos of built-in plugins](../demos/demos.html#using-built-in-plugins)
+
+------
+
+Big thanks to [Artus Kolanowski](https://github.com/witrin) for helping me with modular structure and for providing best practice with developing the code.
+
+
+
+
+
+{{!--
+
+## owl.lazyload.js
+
+LazyLoad require `class="owl-lazy"` and link to image inside data: data-src="url_to_img" or/and data-src-retina="url_to_highres_img".
+There is also option to load images into background but this needs to be tested. [See demo](/demos/demo.html)
+
+Usage:
+
+```
+$('.owl-carousel').owlCarousel({
+	lazyLoad:true
+});
+```
+HTML Markup:
+```
+<div class="owl-carousel">
+	<img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
+	<img class="owl-lazy" data-src-retina="https://placehold.it/350x250&text=1-retina" data-src="https://placehold.it/350x250&text=1" alt="">
+	<div class="owl-lazy" data-src-retina="https://placehold.it/350x250&text=1-retina" data-src="https://placehold.it/350x250&text=1"></div>
+</div>
+```
+
+## owl.video.js
+
+Currently support YouTube, Vimeo, and vzaar videos only.
+
+To add video into carousel just put `<a class="owl-video" href="_straight URL from YouTube, Vimeo, or vzaar"></a>`.
+A tag is not mandatory, can be any other tag but `"owl-video"` and href with url link is required.
+
+Thumbnails are automaticaly fetched from servers. [See demo](/demos/demo.html)
+
+#### Usage:
+```
+$('.owl-carousel').owlCarousel({
+	video:true,
+	videoHeight:200, //optional
+	videoWidth: 200 //optional
+});
+```
+#### HTML Markup:
+```
+<div class="owl-carousel">
+	<div class="article-video"><a class="owl-video" href="https://vimeo.com/23924346"></a></div>
+	<div class="article-video"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>
+	<div class="article-video"><a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div>
+	<div class="article-video"><a class="owl-video" href="https://www.youtube.com/watch?v=oy18DJwy5lI"></a></div>
+</div>
+```
+
+## owl.autoheight.js
+
+Adjusts stage height to highest element on viewport. No special HTML markup required. [See demo](/demos/demo.html)
+
+#### Usage:
+```
+$('.owl-carousel').owlCarousel({
+	autoHeight:true,
+	autoHeightClass: 'owl-height' //default
+});
+```
+
+## owl.animate.js
+
+Owl Carousel CSS has built-in only fade out transition. To get more fancy looking animations you have to create them yourself in CSS or use fantastic Animate.css library created by Daniel Eden https://daneden.github.io/animate.css/
+Animate functions works only with one item and only in browsers that support perspective property.
+
+To get fade out effect just set `animateOut: 'fadeOut'`
+
+#### Default options:
+```
+animateOut:false;
+animateIn:false;
+```
+Read more on demo page. --}}
+
+{{/markdown }}
+
@@ -0,0 +1,33 @@
+---
+title: External Libs
+subTitle: Development
+nav: docs
+description: Owl Carousel Documentation
+
+sort: 4
+tags:
+- Development
+---
+
+{{#markdown }}
+## External Libraries
+> Why not try Owl with other fantastic open source libraries? Check the list of plugins I've used in some of the demos.
+
+
+### animate.css
+This is an awesome library created by Daniel Eden of CSS3 animations that perfectly works with animate functions.
+* [Visit Animate.css website](https://daneden.github.io/animate.css/)
+* [See Owl animate demo](/demos/animate.html)
+
+-----
+
+### mouse.wheel.js
+A jQuery plugin created by Brandon Aaron that adds cross-browser mouse wheel support with delta normalization.
+
+* [Visit jQuery Mousewheel website](https://github.com/brandonaaron/jquery-mousewheel)
+* [See Owl mousewheel demo](/demos/mousewheel.html)
+
+-----
+Let me know if you find any useful plugins that fits to Owl.
+
+{{/markdown }}
@@ -0,0 +1,55 @@
+---
+title: Plugin API
+subTitle: Development
+nav: docs
+description: Owl Carousel Documentation
+
+sort: 2
+tags:
+- Development
+---
+
+{{#markdown }}
+## Plugin API
+> Plugin API allows you to extend carousel object constructor and use internal functions and variables. Use callback events to communicate between host and plugin.
+
+
+Plugin scaffolding:
+
+```
+/**
+ * Plugin Name
+ * @since 2.0.0
+ */
+
+;(function ( $, window, document, undefined ) {
+
+	PluginName = function(scope){
+		this.owl = scope;
+		this.owl._options = $.extend({}, PluginName.Defaults, this.owl.options);
+
+		//link callback events with owl carousel here
+	}
+
+	PluginName.Defaults = {
+		optionName: 'value',
+		optionName2: 'value'
+	}
+
+	//methods:
+	PluginName.prototype.method = function(){
+
+	}
+
+	//destroy:
+	AutoHeight.prototype.destroy = function(){
+		//events here
+	};
+
+	$.fn.owlCarousel.Constructor.Plugins['pluginName'] = PluginName;
+
+})( window.Zepto || window.jQuery, window,  document );
+```
+
+{{/markdown }}
+
@@ -0,0 +1,62 @@
+---
+title: Sass Styles
+subTitle: Development
+nav: docs
+description: Owl Carousel Documentation
+
+sort: 3
+tags:
+- Development
+---
+
+{{#markdown }}
+## Using Sass
+> Owl uses the Sass pre-processor to build CSS for all main modules and themes. If you don’t know Sass, have a look at their [website](http://sass-lang.com/) and you’ll love it. Owl uses a faster adaptation of Sass written in C, [libsass](http://libsass.org/) (via [grunt-sass](https://github.com/sindresorhus/grunt-sass)), that doesn't require a Ruby dependency for our build process.
+
+To build the CSS from its Sass source, it’s required to have:
+
+* [Node.js](https://nodejs.org/)
+* [Grunt](http://gruntjs.com/)
+
+Check this [tutorial](https://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/) to learn how to use Sass and libsass in Grunt environment.
+
+### SCSS Files included
+
+Source files can be found on [Github Project]( {{ pkg.homepage }})
+
+```
+src/
+└── scss/
+    ├── _mixins.scss
+    ├── _theme.scss
+    ├── owl.carousel.scss
+    ├── owl.animate.scss
+    ├── owl.autoheight.scss
+    ├── owl.lazyload.scss
+    ├── owl.video.scss
+    ├── owl.theme.default.scss
+    └── owl.theme.green.scss
+```
+
+### _mixins.scss
+
+_mixins contain basic snippets generators for CSS3 cross-browser styles.
+
+### _theme.scss
+
+Scss structure for theme. Use owl.carousel.default.scss to change variables and generate new styles.
+
+### owl.carousel.scss
+
+Core file to handle basic styles and override some unnecessary browsers behaviors. You shouldn’t change this file unless you have to.
+
+### owl.[pluginname].scss
+
+Styles for modules.
+
+### owl.theme.*.scss
+
+Theme files for dots and navigations buttons. Use `owl.theme.default.scss` to upgrade to your own styles or create a new theme.
+
+
+{{/markdown }}
@@ -0,0 +1,60 @@
+---
+title: FAQ
+subTitle: Getting Started
+nav: docs
+description: Owl Carousel Documentation
+
+sort: 3
+
+tags:
+- Getting Started
+---
+
+{{#markdown }}
+## FAQ
+------
+
+Before you ask a question in the comments/via email please read the FAQs:
+
+#### Can i use it for free?
+
+Yes!
+
+------
+#### Can i use it for ecommerce?
+
+Yes!
+
+------
+#### Has it any licence?
+
+MIT
+
+------
+#### Can i use many owls on one page?
+
+Yes, however remember that you can use only one unique ID on single page.
+
+------
+#### Can i ask for a new functionality?
+
+Yes! Go to [Github]({{ pkg.bugs.url }}) issues page and ask for a feature.
+
+------
+#### I need help!
+
+First visit [Github]({{ pkg.bugs.url }}), then look again at documentation and demos. Don't forget to add [jsfiddle](https://jsfiddle.net/) or a link to your demo/example website!
+
+------
+#### Does it have infinity scroll/circle/loop slides?
+
+Yes, finally it does.
+
+------
+#### What's new in latest release?
+
+See Changelog
+
+------
+
+{{/markdown }}
@@ -0,0 +1,71 @@
+---
+title: Installation
+subTitle: Getting Started
+nav: docs
+description: Owl Carousel Documentation
+
+sort: 2
+tags:
+- Getting Started
+---
+
+{{#markdown }}
+## Installation
+------
+
+### Include CSS
+First, include two CSS files into your HTML head:
+```
+<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
+<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
+```
+> `owl.carousel.css` file is required and should be included before any *.js files.
+
+
+Second `owl.theme.default.css` file is optional and feel free to edit it. However, it is required if you'd like the default nav controls like dots or next buttons.
+Inside the source package you can also find [SCSS](http://sass-lang.com/) files for easy generation of your own themes.
+
+
+### Include JS
+
+Yep, include jQuery and `owl.carousel.min.js` into the footer.
+
+```
+<script src="jquery.min.js"></script>
+<script src="owlcarousel/owl.carousel.min.js"></script>
+```
+
+### Set HTML
+
+You don't need any special markup. All you need is to wrap your divs(owl works with any type element a/img/span..) inside the container element `<div class="owl-carousel">`.
+Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file. If you want the default nav controls like dots or buttons, you must also include the "owl-theme" class on that same div.
+
+```
+<!-- Set up your HTML -->
+<div class="owl-carousel">
+  <div> Your Content </div>
+  <div> Your Content </div>
+  <div> Your Content </div>
+  <div> Your Content </div>
+  <div> Your Content </div>
+  <div> Your Content </div>
+  <div> Your Content </div>
+</div>
+```
+
+### Call the plugin
+
+Now call the Owl initializer function and your carousel is ready.
+
+```
+$(document).ready(function(){
+  $(".owl-carousel").owlCarousel();
+});
+```
+> See [demos](/OwlCarousel2/demos/demos.html) for customisation and options usage.
+
+### Next Step
+
+####[FAQ](started-faq.html)
+
+{{/markdown }}
@@ -0,0 +1,90 @@
+---
+title: Welcome
+subTitle: Getting Started
+nav: docs
+description: Owl Carousel Documentation
+
+sort: 1
+
+tags:
+- Getting Started
+---
+
+{{#markdown }}
+## Welcome
+
+> No matter if you are a beginner or an advanced user, starting with Owl is easy.
+
+### New Features
+
+* Infinity Loop
+* Center item
+* Smart Speed
+* Stage Padding
+* Item Margin
+* Ability to make almost all options responsive
+* Various Widths
+* Callback Events
+* RTL
+* YouTube/Vimeo/vzaar support (fetching thumbnails as well)
+* Anchors navigation
+* Merged Items
+* and more...
+
+### Compatibility
+
+Owl Carousel 2.x.x is not compatibile with previous version 1.x.x. The idea stays the same and it has a lot in common with Owl1 but the core code was re-written from scratch and I’m very proud with all the new features.
+
+Owl Carousel has been tested in following browsers/devices:
+
+* Chrome
+* Firefox
+* Opera
+* IE7/8/10/11
+* iPad Safari
+* iPod4 Safari
+* Nexus 7 Chrome
+* Galaxy S4
+* Nokia 8s Windows8
+
+
+### Library
+
+Download a version that suits your needs:
+
+* [Owl Carousel - {{ pkg.version }}](https://github.com/OwlCarousel2/OwlCarousel2/archive/{{ pkg.version }}.zip) - Distributed version - compiled and minified. Javascript, images and CSS included.
+* [Owl Carousel Source - {{ pkg.version }}]({{ app.download }}) - Source files including this documentation. All wrapped in Grunt project.
+
+### Files included
+
+Distributed version structure:
+
+```
+owlcarousel/
+├── assets/
+│   ├── owl.carousel.css
+│   ├── owl.carousel.min.css
+│   ├── owl.theme.default.css
+│   ├── owl.theme.default.min.css
+│   ├── owl.theme.green.css
+│   ├── owl.theme.green.min.css
+│   └── owl.video.play.png
+│
+├── owl.carousel.js
+├── owl.carousel.min.js
+├── LICENSE-MIT
+└── README.md
+```
+
+### Dependecies
+
+Get the latest [jQuery](https://jquery.com/) or [Zepto](http://zeptojs.com/) library.
+Minimum compatible jQuery version is 1.8.3 version.
+
+
+### Next Step
+
+####[Installation](started-installation.html)
+
+
+{{/markdown }}
@@ -0,0 +1,54 @@
+---
+title: Changelog
+subTitle: Support
+nav: docs
+description: Owl Carousel Documentation
+
+sort: 5
+
+tags:
+- Support
+---
+
+{{#markdown }}
+## Changelog
+------
+
+##### 2.0.0.beta.2.4
+
+* Refactors Core
+* Makes `slideBy` option independet of `nav`
+* Corrects update of `navRewind`
+* Corrects `change` event for position in carousel
+* Replaces `indexOf` with `$.inArray` in navigaiton plugin
+* Corrects `to` override in navigation plugin
+* Adds core overrides for navigation plugin
+* Corrects naming of plugins as object members
+* Corrects `navText` option of navigation plugin
+* Corrects `slideBy` option and adds events for navigation plugin
+* Corrects adaptive behaviour of the navigation plugin
+* fixed autoHeight plugin
+* fixed animate plugin
+* added autoHeight demo
+* fixed download link in subpages
+
+
+##### 2.0.0.beta.2.3
+
+Thanks to Artus Kolanowski for this amazing update
+* Separates navigation from core (nav,dots and hash)
+* Corrests and completes JSDocs comments
+* Replaces `bind` with `$.proxy`
+
+
+##### 2.0.0.beta.2.2
+* fixed some events trigger two times on initilize
+* fixed lazyload bug
+* fixed stage active class calculation when using stagePadding
+* fixed translate callback
+* fixed fixed update function and update/updated events
+* included stagePadding demo
+
+------
+
+{{/markdown }} 
@@ -0,0 +1,23 @@
+---
+title: Contact
+subTitle: Support
+nav: docs
+description: Owl Carousel Documentation
+
+sort: 5
+
+tags:
+- Support
+---
+
+{{#markdown }}
+## Contact
+------
+
+If you are looking for help then the best place to ask a question is [Github]({{ pkg.bugs.url }}). Also don't forget to add a [jsfiddle](https://jsfiddle.net/) or a link to your demo/example website!
+
+### Report a bug
+
+Please use [Github]({{ pkg.bugs.url }}) to report bugs.
+
+{{/markdown }}
@@ -0,0 +1,62 @@
+---
+title: Contributing
+subTitle: Support
+nav: docs
+description: Owl Carousel Documentation
+
+sort: 1
+
+tags:
+- Support
+---
+
+{{#markdown }}
+## Contributing
+
+
+> This project is hosted by Smashing Boxes but so many awesome contributors have had a big impact on the code. Thanks to all the amazing people who spent hours helping me with the development and teaching me new tricks!
+
+If you are looking to support Owl Carousel with your amazing ideas (or just fix some nasty bugs) then go to [Github]({{ pkg.homepage }}) and fork the project.
+
+### Some tips for contributors
+
+Owl Carousel is built around Grunt, Bower and Assemble frameworks. If you are not familiar with those tools please visit:
+
+* [Node.js](https://nodejs.org/)
+* [Yeoman](http://yeoman.io/)
+* [Grunt](http://gruntjs.com/)
+* [Bower](http://bower.io/)
+* [Assemble](http://assemble.io/)
+
+### Installation dependecies
+
+Open Terminal, go to folder with project and type:
+```
+npm install
+```
+Then install bower components
+```
+bower install
+```
+### Grunt Tasks
+
+The default task runs two other tasks: `dist` and `docs`. Type grunt to run default:
+
+```
+grunt
+```
+
+Now that the whole project is generated, run the last grunt task:
+
+```
+grunt serve
+```
+
+This creates localhost server and opens docs in your default browser. `watch` tasks will look for any changes and will automatically update the project and reload the browser.
+
+Now you are ready to make some cool updates by yourself. Owl project is in `src` folder. Also dont change `src/css/*.css` - all css files are generated from sass.
+
+> Happy Coding
+
+
+{{/markdown }}
@@ -0,0 +1,9 @@
+---
+title: Home
+nav: home
+lead: Owl Carousel 2
+tagline: Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
+note: Please note that this is a beta version only for testing purposes. Enjoy!
+---
+
+
@@ -0,0 +1,10 @@
+<footer class="footer">
+	<div class="row">
+		<div class="large-12 columns">
+			<h5>
+				<a href="/OwlCarousel2/docs/support-contact.html">{{ pkg.author.name }}</a>
+				<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text={{ app.title }} - This is so awesome! " target="_blank"></a>
+			</h5>
+		</div>
+	</div>
+</footer>
@@ -0,0 +1,30 @@
+<meta charset="utf-8">
+<meta name="msapplication-tap-highlight" content="no"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+<meta name="description" content="{{default description pkg.description}}">
+<meta name="author" content="{{ pkg.author.name }}">
+
+<title>
+  {{default title page.basename }} | {{ app.title }} | {{ pkg.version }}
+</title>
+
+
+<!-- Stylesheets -->
+<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
+<link rel="stylesheet" href="{{assets}}/css/docs.theme.min.css">
+
+<!-- Owl Stylesheets -->
+<link rel="stylesheet" href="{{assets}}/owlcarousel/assets/owl.carousel.min.css">
+<link rel="stylesheet" href="{{assets}}/owlcarousel/assets/owl.theme.default.min.css">
+
+<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+<!--[if lt IE 9]>
+  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+<![endif]-->
+
+<!-- Favicons -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ assets }}/ico/apple-touch-icon-144-precomposed.png">
+<link rel="shortcut icon" href="{{ assets }}/ico/favicon.png">
+<link rel="shortcut icon" href="favicon.ico">
@@ -0,0 +1,29 @@
+<header class="header">
+	<div class="row">
+		<div class="large-12 columns">
+			<div class="brand left">
+				<h3><a href="/OwlCarousel2/">owl.carousel.js</a></h3>
+			</div>
+			<a id="toggle-nav" class="right">
+				<span></span><span></span><span></span>
+			</a>
+			<div class="nav-bar">
+				<ul class="clearfix">
+					<li{{#is nav "home"}} class="active"{{/is}}>
+						<a href="/OwlCarousel2/index.html">Home</a>
+					</li>
+					<li{{#is nav "demos"}} class="active"{{/is}}>
+						<a href="/OwlCarousel2/demos/demos.html">Demos</a>
+					</li>
+					<li{{#is nav "docs"}} class="active"{{/is}}>
+						<a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>
+					</li>
+					<li>
+						<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/{{ pkg.version }}.zip">Download</a>
+						<span class="download"></span>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</header>
@@ -0,0 +1,42 @@
+
+<div class="home-demo">
+	<div class="row">
+		<div class="large-12 columns">
+			<h3>Demo</h3>
+			<div class="owl-carousel">
+				<div class="item"><h2>Swipe</h2></div>
+				<div class="item"><h2>Drag</h2></div>
+				<div class="item"><h2>Responsive</h2></div>
+				<div class="item"><h2>CSS3</h2></div>
+				<div class="item"><h2>Fast</h2></div>
+				<div class="item"><h2>Easy</h2></div>
+				<div class="item"><h2>Free</h2></div>
+				<div class="item"><h2>Upgradable</h2></div>
+				<div class="item"><h2>Tons of options</h2></div>
+				<div class="item"><h2>Infinity</h2></div>
+				<div class="item"><h2>Auto Width</h2></div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<script>
+	var owl = $('.owl-carousel');
+
+	owl.owlCarousel({
+		margin:10,
+		loop:true,
+		responsive:{
+			0:{
+				items:1
+			},
+			600:{
+				items:2
+			},
+			1000:{
+				items:3
+			}
+		}
+	})
+
+</script>
@@ -0,0 +1,17 @@
+<div id="features">
+	<div class="row">
+		<div class="small-12 medium-9 small-centered columns">
+			{{#each features}}
+			<section class="row feature">
+				<div class="medium-4 small-12 columns">
+					<img src="{{../assets}}/img/{{image}}" alt="">
+				</div>
+				<div class="medium-8 small-12 columns">
+					<h2>{{title}}</h2>
+					<p>{{subtitle}}</p>
+				</div>
+			</section>
+			{{/each}}
+		</div>
+	</div>
+</div>
@@ -0,0 +1,14 @@
+<section id="hero">
+	<div class="row">
+		<div class="large-8 medium-8 columns">
+			<h1>{{ lead }}</h1>
+			<h4>{{ tagline }}</h4>
+			<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/{{ pkg.version }}.zip" class="hero-button">Download</a>
+			<a href="{{ pkg.homepage }}" class="hero-button outline">Github</a>
+			<p>{{ pkg.version }}</p>
+		</div>
+		<div class="large-4 medium-4 columns">
+			<img class="owl-logo" src="{{assets}}/img/owl-logo.png" alt="mr. Owl">
+		</div>
+	</div>
+</section>
@@ -0,0 +1,19 @@
+
+
+<section id="teaser-text">
+	<div class="row">
+		<div class="small-12 medium-11 small-centered columns">
+{{#markdown }}
+
+-----
+
+### Owl Carousel has been choosen as number one jQuery plugin by hundreds of developers. Now its time for a new version that comes with lots of new features and even more user friendly API. 
+
+Watch this space- we'll be launching soon :)
+
+
+{{/markdown }}
+		</div>
+	</div>
+</section>
+
@@ -0,0 +1,3 @@
+<script src="{{assets}}/vendors/jquery.min.js"></script>
+<script src="{{assets}}/owlcarousel/owl.carousel.js"></script>
+
@@ -0,0 +1,35 @@
+<ul class="side-nav">
+	<li class="side-nav-head">Getting Started</li>
+	{{#withSort pages "data.sort"}}
+		{{#is data.subTitle "Getting Started"}}
+		<li><a href="{{basename }}.html">{{data.title}}</a></li>
+		{{/is}}
+	{{/withSort}}
+</ul>
+
+<ul class="side-nav">
+	<li class="side-nav-head">API</li>
+	{{#withSort pages "data.sort"}}
+		{{#is data.subTitle "API"}}
+		<li><a href="{{basename }}.html">{{data.title}}</a></li>
+		{{/is}}
+	{{/withSort}}
+</ul>
+
+<ul class="side-nav">
+	<li class="side-nav-head">Development</li>
+	{{#withSort pages "data.sort"}}
+		{{#is data.subTitle "Development"}}
+		<li><a href="{{basename }}.html">{{data.title}}</a></li>
+		{{/is}}
+	{{/withSort}}
+</ul>
+
+<ul class="side-nav">
+	<li class="side-nav-head">Support</li>
+	{{#withSort pages "data.sort"}}
+		{{#is data.subTitle "Support"}}
+		<li><a href="{{basename }}.html">{{data.title}}</a></li>
+		{{/is}}
+	{{/withSort}}
+</ul>
@@ -0,0 +1,7 @@
+<section class="title">
+	<div class="row">
+		<div class="large-12 columns">
+			<h1>{{ subTitle }}</h1>
+		</div>
+	</div>
+</section>
@@ -0,0 +1,3 @@
+<script src="{{assets}}/vendors/highlight.js"></script>
+<script src="{{assets}}/js/app.js"></script>
+{{!-- <script src="{{assets}}/js/foundation.min.js"></script> --}}