redo main/register page
This commit is contained in:
SowinskiBraeden committed
1 parent
eaa2febbf2
commit
1ad5eb654b
400 files changed
+93168
-323
No files matched your search
@@ -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>
|
||||
Reference in new issue
Block a user