redo main/register page

public/resources/OwlCarousel2-2.3.4/docs_src/templates/pages/demos/merge.hbs

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