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>
|
||||
@@ -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 }}
|
||||
|
||||
+123
@@ -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 }}
|
||||
+71
@@ -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 }}
|
||||
+54
@@ -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 }}
|
||||
+62
@@ -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!
|
||||
---
|
||||
|
||||
|
||||
Reference in new issue
Block a user