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
File diff suppressed because it is too large.
Load diff
File diff suppressed because one or more lines are too long.
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
@@ -0,0 +1,32 @@
|
||||
$(document).ready(function(){
|
||||
|
||||
// responsive nav
|
||||
var responsiveNav = $('#toggle-nav');
|
||||
var navBar = $('.nav-bar');
|
||||
|
||||
responsiveNav.on('click',function(e){
|
||||
e.preventDefault();
|
||||
console.log(navBar);
|
||||
navBar.toggleClass('active')
|
||||
});
|
||||
|
||||
// pseudo active
|
||||
if($('#docs').length){
|
||||
var sidenav = $('ul.side-nav').find('a');
|
||||
var url = window.location.pathname.split( '/' );
|
||||
var url = url[url.length-1];
|
||||
|
||||
sidenav.each(function(i,e){
|
||||
var active = $(e).attr('href');
|
||||
|
||||
if(active === url){
|
||||
$(e).parent('li').addClass('active');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
hljs.configure({tabReplace: ' '});
|
||||
hljs.initHighlightingOnLoad();
|
||||
File diff suppressed because one or more lines are too long.
@@ -0,0 +1,122 @@
|
||||
# Owl Carousel 2
|
||||
|
||||
Touch enabled [jQuery](https://jquery.com/) plugin that lets you create a beautiful, responsive carousel slider. **To get started, check out https://owlcarousel2.github.io/OwlCarousel2/.**
|
||||
|
||||
**Notice:** The old Owl Carousel site (owlgraphic [dot] com) is no longer in use. Please delete all references to this in bookmarks and your own products' documentation as it's being used for malicious purposes.
|
||||
|
||||
## Quick start
|
||||
|
||||
### Install
|
||||
|
||||
This package can be installed with:
|
||||
|
||||
- [npm](https://www.npmjs.com/package/owl.carousel): `npm install --save owl.carousel` or `yarn add owl.carousel jquery`
|
||||
- [bower](http://bower.io/search/?q=owl.carousel): `bower install --save owl.carousel`
|
||||
|
||||
Or download the [latest release](https://github.com/OwlCarousel2/OwlCarousel2/releases).
|
||||
|
||||
### Load
|
||||
|
||||
#### Webpack
|
||||
|
||||
Add jQuery via the "webpack.ProvidePlugin" to your webpack configuration:
|
||||
|
||||
const webpack = require('webpack');
|
||||
|
||||
//...
|
||||
plugins: [
|
||||
new webpack.ProvidePlugin({
|
||||
$: 'jquery',
|
||||
jQuery: 'jquery',
|
||||
'window.jQuery': 'jquery'
|
||||
}),
|
||||
],
|
||||
//...
|
||||
|
||||
Load the required stylesheet and JS:
|
||||
|
||||
```js
|
||||
import 'owl.carousel/dist/assets/owl.carousel.css';
|
||||
import 'owl.carousel';
|
||||
```
|
||||
|
||||
#### Static HTML
|
||||
|
||||
Put the required stylesheet at the [top](https://developer.yahoo.com/performance/rules.html#css_top) of your markup:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
|
||||
```
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="/bower_components/owl.carousel/dist/assets/owl.carousel.min.css" />
|
||||
```
|
||||
|
||||
**NOTE:** If you want to use the default navigation styles, you will also need to include `owl.theme.default.css`.
|
||||
|
||||
|
||||
Put the script at the [bottom](https://developer.yahoo.com/performance/rules.html#js_bottom) of your markup right after jQuery:
|
||||
|
||||
```html
|
||||
<script src="/node_modules/jquery/dist/jquery.js"></script>
|
||||
<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
|
||||
```
|
||||
|
||||
```html
|
||||
<script src="/bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
Wrap your items (`div`, `a`, `img`, `span`, `li` etc.) with a container element (`div`, `ul` etc.). Only the class `owl-carousel` is mandatory to apply proper styles:
|
||||
|
||||
```html
|
||||
<div class="owl-carousel owl-theme">
|
||||
<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>
|
||||
```
|
||||
**NOTE:** The `owl-theme` class is optional, but without it, you will need to style navigation features on your own.
|
||||
|
||||
|
||||
Call the [plugin](https://learn.jquery.com/plugins/) function and your carousel is ready.
|
||||
|
||||
```javascript
|
||||
$(document).ready(function(){
|
||||
$('.owl-carousel').owlCarousel();
|
||||
});
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
The documentation, included in this repo in the root directory, is built with [Assemble](http://assemble.io/) and publicly available at https://owlcarousel2.github.io/OwlCarousel2/. The documentation may also be run locally.
|
||||
|
||||
## Building
|
||||
|
||||
This package comes with [Grunt](http://gruntjs.com/) and [Bower](http://bower.io/). The following tasks are available:
|
||||
|
||||
* `default` compiles the CSS and JS into `/dist` and builds the doc.
|
||||
* `dist` compiles the CSS and JS into `/dist` only.
|
||||
* `watch` watches source files and builds them automatically whenever you save.
|
||||
* `test` runs [JSHint](http://www.jshint.com/) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/).
|
||||
|
||||
To define which plugins are build into the distribution just edit `/_config.json` to fit your needs.
|
||||
|
||||
## Contributing
|
||||
|
||||
Please read [CONTRIBUTING.md](CONTRIBUTING.md).
|
||||
|
||||
## Roadmap
|
||||
|
||||
Please make sure to check out our [Roadmap Discussion](https://github.com/OwlCarousel2/OwlCarousel2/issues/1756).
|
||||
|
||||
|
||||
## License
|
||||
|
||||
The code and the documentation are released under the [MIT License](LICENSE).
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1,186 @@
|
||||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
/*
|
||||
* Owl Carousel - Core
|
||||
*/
|
||||
.owl-carousel {
|
||||
display: none;
|
||||
width: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* position relative and z-index fix webkit rendering fonts issue */
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
.owl-carousel .owl-stage {
|
||||
position: relative;
|
||||
-ms-touch-action: pan-Y;
|
||||
touch-action: manipulation;
|
||||
-moz-backface-visibility: hidden;
|
||||
/* fix firefox animation glitch */ }
|
||||
.owl-carousel .owl-stage:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
line-height: 0;
|
||||
height: 0; }
|
||||
.owl-carousel .owl-stage-outer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* fix for flashing background */
|
||||
-webkit-transform: translate3d(0px, 0px, 0px); }
|
||||
.owl-carousel .owl-wrapper,
|
||||
.owl-carousel .owl-item {
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0); }
|
||||
.owl-carousel .owl-item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
float: left;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none; }
|
||||
.owl-carousel .owl-item img {
|
||||
display: block;
|
||||
width: 100%; }
|
||||
.owl-carousel .owl-nav.disabled,
|
||||
.owl-carousel .owl-dots.disabled {
|
||||
display: none; }
|
||||
.owl-carousel .owl-nav .owl-prev,
|
||||
.owl-carousel .owl-nav .owl-next,
|
||||
.owl-carousel .owl-dot {
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.owl-carousel .owl-nav button.owl-prev,
|
||||
.owl-carousel .owl-nav button.owl-next,
|
||||
.owl-carousel button.owl-dot {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
padding: 0 !important;
|
||||
font: inherit; }
|
||||
.owl-carousel.owl-loaded {
|
||||
display: block; }
|
||||
.owl-carousel.owl-loading {
|
||||
opacity: 0;
|
||||
display: block; }
|
||||
.owl-carousel.owl-hidden {
|
||||
opacity: 0; }
|
||||
.owl-carousel.owl-refresh .owl-item {
|
||||
visibility: hidden; }
|
||||
.owl-carousel.owl-drag .owl-item {
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.owl-carousel.owl-grab {
|
||||
cursor: move;
|
||||
cursor: grab; }
|
||||
.owl-carousel.owl-rtl {
|
||||
direction: rtl; }
|
||||
.owl-carousel.owl-rtl .owl-item {
|
||||
float: right; }
|
||||
|
||||
/* No Js */
|
||||
.no-js .owl-carousel {
|
||||
display: block; }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Animate Plugin
|
||||
*/
|
||||
.owl-carousel .animated {
|
||||
animation-duration: 1000ms;
|
||||
animation-fill-mode: both; }
|
||||
|
||||
.owl-carousel .owl-animated-in {
|
||||
z-index: 0; }
|
||||
|
||||
.owl-carousel .owl-animated-out {
|
||||
z-index: 1; }
|
||||
|
||||
.owl-carousel .fadeOut {
|
||||
animation-name: fadeOut; }
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1; }
|
||||
100% {
|
||||
opacity: 0; } }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Auto Height Plugin
|
||||
*/
|
||||
.owl-height {
|
||||
transition: height 500ms ease-in-out; }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Lazy Load Plugin
|
||||
*/
|
||||
.owl-carousel .owl-item {
|
||||
/**
|
||||
This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
|
||||
calculation of the height of the owl-item that breaks page layouts
|
||||
*/ }
|
||||
.owl-carousel .owl-item .owl-lazy {
|
||||
opacity: 0;
|
||||
transition: opacity 400ms ease; }
|
||||
.owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
|
||||
max-height: 0; }
|
||||
.owl-carousel .owl-item img.owl-lazy {
|
||||
transform-style: preserve-3d; }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Video Plugin
|
||||
*/
|
||||
.owl-carousel .owl-video-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: #000; }
|
||||
|
||||
.owl-carousel .owl-video-play-icon {
|
||||
position: absolute;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -40px;
|
||||
margin-top: -40px;
|
||||
background: url("owl.video.play.png") no-repeat;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
-webkit-backface-visibility: hidden;
|
||||
transition: transform 100ms ease; }
|
||||
|
||||
.owl-carousel .owl-video-play-icon:hover {
|
||||
-ms-transform: scale(1.3, 1.3);
|
||||
transform: scale(1.3, 1.3); }
|
||||
|
||||
.owl-carousel .owl-video-playing .owl-video-tn,
|
||||
.owl-carousel .owl-video-playing .owl-video-play-icon {
|
||||
display: none; }
|
||||
|
||||
.owl-carousel .owl-video-tn {
|
||||
opacity: 0;
|
||||
height: 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
transition: opacity 400ms ease; }
|
||||
|
||||
.owl-carousel .owl-video-frame {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
width: 100%; }
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
/*
|
||||
* Default theme - Owl Carousel CSS File
|
||||
*/
|
||||
.owl-theme .owl-nav {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.owl-theme .owl-nav [class*='owl-'] {
|
||||
color: #FFF;
|
||||
font-size: 14px;
|
||||
margin: 5px;
|
||||
padding: 4px 7px;
|
||||
background: #D6D6D6;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border-radius: 3px; }
|
||||
.owl-theme .owl-nav [class*='owl-']:hover {
|
||||
background: #869791;
|
||||
color: #FFF;
|
||||
text-decoration: none; }
|
||||
.owl-theme .owl-nav .disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default; }
|
||||
|
||||
.owl-theme .owl-nav.disabled + .owl-dots {
|
||||
margin-top: 10px; }
|
||||
|
||||
.owl-theme .owl-dots {
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.owl-theme .owl-dots .owl-dot {
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline; }
|
||||
.owl-theme .owl-dots .owl-dot span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 5px 7px;
|
||||
background: #D6D6D6;
|
||||
display: block;
|
||||
-webkit-backface-visibility: visible;
|
||||
transition: opacity 200ms ease;
|
||||
border-radius: 30px; }
|
||||
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
|
||||
background: #869791; }
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
/*
|
||||
* Green theme - Owl Carousel CSS File
|
||||
*/
|
||||
.owl-theme .owl-nav {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.owl-theme .owl-nav [class*='owl-'] {
|
||||
color: #FFF;
|
||||
font-size: 14px;
|
||||
margin: 5px;
|
||||
padding: 4px 7px;
|
||||
background: #D6D6D6;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border-radius: 3px; }
|
||||
.owl-theme .owl-nav [class*='owl-']:hover {
|
||||
background: #4DC7A0;
|
||||
color: #FFF;
|
||||
text-decoration: none; }
|
||||
.owl-theme .owl-nav .disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default; }
|
||||
|
||||
.owl-theme .owl-nav.disabled + .owl-dots {
|
||||
margin-top: 10px; }
|
||||
|
||||
.owl-theme .owl-dots {
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.owl-theme .owl-dots .owl-dot {
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline; }
|
||||
.owl-theme .owl-dots .owl-dot span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 5px 7px;
|
||||
background: #D6D6D6;
|
||||
display: block;
|
||||
-webkit-backface-visibility: visible;
|
||||
transition: opacity 200ms ease;
|
||||
border-radius: 30px; }
|
||||
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
|
||||
background: #4DC7A0; }
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#4DC7A0;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#4DC7A0}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
File diff suppressed because it is too large.
Load diff
+7
File diff suppressed because one or more lines are too long.
File diff suppressed because one or more lines are too long.
File diff suppressed because one or more lines are too long.
File diff suppressed because one or more lines are too long.
File diff suppressed because one or more lines are too long.
+8
@@ -0,0 +1,8 @@
|
||||
/*! Copyright (c) 2013 Brandon Aaron (http://brandon.aaron.sh)
|
||||
* Licensed under the MIT License (LICENSE.txt).
|
||||
*
|
||||
* Version: 3.1.11
|
||||
*
|
||||
* Requires: jQuery 1.2.2+
|
||||
*/
|
||||
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.11",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b)["offsetParent"in a.fn?"offsetParent":"parent"]();return c.length||(c=a("body")),parseInt(c.css("fontSize"),10)},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
|
||||
@@ -0,0 +1,272 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Animate carousel">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Animate Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Animate</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<p>To get fade out effect just set:</p>
|
||||
<pre><code>animateOut: 'fadeOut'</code></pre>
|
||||
<blockquote>
|
||||
<p><code>fadeOut</code> 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
|
||||
<a href="https://daneden.github.io/animate.css/">animate.css</a> library and you are ready to extend Owl with new fancy transitions.</p>
|
||||
</blockquote>
|
||||
<h3 id="important">Important</h3>
|
||||
<p>Animate functions work only with one item and only in browsers that support perspective property.</p>
|
||||
<h3 id="how-to-use-additional-animation-from-animate-css-library">How to use additional animation from <code>animate.css</code> library</h3>
|
||||
<ol>
|
||||
<li> <a href="https://daneden.github.io/animate.css/">Download animate.css</a> </li>
|
||||
<li>Include animate.css into header.</li>
|
||||
<li>Set <code>animateOut</code> and <code>animateIn</code> options with the style names you picked.</li>
|
||||
</ol>
|
||||
<pre><code>$('.custom1').owlCarousel({
|
||||
animateOut: 'slideOutDown',
|
||||
animateIn: 'flipInX',
|
||||
items:1,
|
||||
margin:30,
|
||||
stagePadding:30,
|
||||
smartSpeed:450
|
||||
});</code></pre>
|
||||
<p>Example with slideOutDown and flipInX</p>
|
||||
<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>
|
||||
<h3 id="how-does-it-work-">How does it work?</h3>
|
||||
<p>Before animation starts three classes are added to each item:</p>
|
||||
<ul>
|
||||
<li>.animated - added on both In and Out item - ive included this class from Animate.css into Owl core CSS file.</li>
|
||||
<li>.owl-animated-out - only on Out item - use it to change z-index</li>
|
||||
<li>.owl-animated-in - only on In item - use it to change z-index</li>
|
||||
<li>.classNameOut - only on Out item - this is your custom animation class from options.</li>
|
||||
<li>.classNameIn - only on In item - this is your custom animation class from options.</li>
|
||||
</ul>
|
||||
<p>Part of owl.carousel.css:</p>
|
||||
<pre><code class="language-css"><span class="comment">/* Feel free to change duration */</span>
|
||||
<span class="class">.animated</span> <span class="rules">{
|
||||
<span class="rule"><span class="attribute">-webkit-animation-duration</span> :<span class="value"> <span class="number">1000</span> ms</span> </span> ;
|
||||
<span class="rule"><span class="attribute">animation-duration</span> :<span class="value"> <span class="number">1000</span> ms</span> </span> ;
|
||||
<span class="rule"><span class="attribute">-webkit-animation-fill-mode</span> :<span class="value"> both</span> </span> ;
|
||||
<span class="rule"><span class="attribute">animation-fill-mode</span> :<span class="value"> both</span> </span> ;
|
||||
<span class="rule">}</span> </span>
|
||||
<span class="comment">/* .owl-animated-out - only for current item */</span>
|
||||
<span class="comment">/* This is very important class. Use z-index if you want move Out item above In item */</span>
|
||||
<span class="class">.owl-animated-out</span> <span class="rules">{
|
||||
<span class="rule"><span class="attribute">z-index</span> :<span class="value"> <span class="number">1</span>
|
||||
</span> </span> </span> }
|
||||
<span class="comment">/* .owl-animated-in - only for upcoming item
|
||||
/* This is very important class. Use z-index if you want move In item above Out item */</span>
|
||||
<span class="class">.owl-animated-in</span> <span class="rules">{
|
||||
<span class="rule"><span class="attribute">z-index</span> :<span class="value"> <span class="number">0</span>
|
||||
</span> </span> </span> }
|
||||
<span class="comment">/* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css: */</span>
|
||||
<span class="class">.fadeOut</span> <span class="rules">{
|
||||
<span class="rule"><span class="attribute">-webkit-animation-name</span> :<span class="value"> fadeOut</span> </span> ;
|
||||
<span class="rule"><span class="attribute">animation-name</span> :<span class="value"> fadeOut</span> </span> ;
|
||||
<span class="rule">}</span> </span>
|
||||
<span class="at_rule">@<span class="keyword">-webkit-keyframes</span> fadeOut </span> {
|
||||
0% <span class="rules">{
|
||||
<span class="rule"><span class="attribute">opacity</span> :<span class="value"> <span class="number">1</span> </span> </span> ;
|
||||
<span class="rule">}</span> </span>
|
||||
100% <span class="rules">{
|
||||
<span class="rule"><span class="attribute">opacity</span> :<span class="value"> <span class="number">0</span> </span> </span> ;
|
||||
<span class="rule">}</span> </span>
|
||||
}
|
||||
<span class="at_rule">@<span class="keyword">keyframes</span> fadeOut </span> {
|
||||
0% <span class="rules">{
|
||||
<span class="rule"><span class="attribute">opacity</span> :<span class="value"> <span class="number">1</span> </span> </span> ;
|
||||
<span class="rule">}</span> </span>
|
||||
100% <span class="rules">{
|
||||
<span class="rule"><span class="attribute">opacity</span> :<span class="value"> <span class="number">0</span> </span> </span> ;
|
||||
<span class="rule">}</span> </span>
|
||||
}</code></pre>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="autoHeight usage demo">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Auto Height Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Auto Height</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<p>To enable use <code>autoHeight: true</code>. 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.</p>
|
||||
<pre><code>//default settings:
|
||||
AutoHeight.Defaults = {
|
||||
autoHeight: false,
|
||||
autoHeightClass: 'owl-height'
|
||||
};</code></pre>
|
||||
<h3 id="setup">Setup</h3>
|
||||
<pre><code>$('.owl-carousel').owlCarousel({
|
||||
items:1,
|
||||
margin:10,
|
||||
autoHeight:true
|
||||
});</code></pre>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.owl-carousel').owlCarousel({
|
||||
items: 1,
|
||||
margin: 10,
|
||||
autoHeight: true
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Autoplay usage demo">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Autoplay Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Autoplay</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<p>Autoplay plugin has three options:</p>
|
||||
<pre><code>//default settings:
|
||||
autoplay:false
|
||||
autoplayTimeout:5000
|
||||
autoplayHoverPause:false</code></pre>
|
||||
<p>In this example i've added two buttons with custom events for play and stop:</p>
|
||||
<pre><code>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')
|
||||
})</code></pre>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Auto Width">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Auto Width Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Auto Width</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<p>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.</p>
|
||||
<h3 id="setup">Setup</h3>
|
||||
<pre><code>$('.owl-carousel').owlCarousel({
|
||||
margin:10,
|
||||
loop:true,
|
||||
autoWidth:true,
|
||||
items:4
|
||||
})</code></pre>
|
||||
<h3 id="html">html</h3>
|
||||
<pre><code><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></code></pre>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.owl-carousel').owlCarousel({
|
||||
margin: 10,
|
||||
loop: true,
|
||||
autoWidth: true,
|
||||
items: 4
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Basic usage demo">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Basic Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Basic</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<p>Basic usage of Owl Carousel. I used <code>loop:true</code> and <code>margin:10</code>. The structure works with any kind of DOM element. In all of my examples i used <code><div class="item">...</div></code> but you could
|
||||
put any other element <code>div/span/a/img...</code></p>
|
||||
<h3 id="setup">Setup</h3>
|
||||
<pre><code>$('.owl-carousel').owlCarousel({
|
||||
loop:true,
|
||||
margin:10,
|
||||
nav:true,
|
||||
responsive:{
|
||||
0:{
|
||||
items:1
|
||||
},
|
||||
600:{
|
||||
items:3
|
||||
},
|
||||
1000:{
|
||||
items:5
|
||||
}
|
||||
}
|
||||
})</code></pre>
|
||||
<h3 id="html">html</h3>
|
||||
<pre><code><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></code></pre>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Center carousel">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Center Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Center</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h4 id="center-with-loop">Center with loop</h4>
|
||||
<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>
|
||||
<h4 id="center-without-loop">Center without loop</h4>
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<blockquote>
|
||||
<p>Works well with odd and even items on screen. Keep in mind that dots are not working here like a pagination.</p>
|
||||
</blockquote>
|
||||
<p>Add center to setup:</p>
|
||||
<pre><code>center:true</code></pre>
|
||||
<h3 id="setup">Setup</h3>
|
||||
<pre><code>$('.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
|
||||
}
|
||||
}
|
||||
});</code></pre>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="A list of Owl Carousel examples.">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Demos | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h4 id="basic-demos-">Basic demos:</h4>
|
||||
<hr>
|
||||
<div class="demo-list">
|
||||
<div class="row">
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="basic.html" class="demo-block">
|
||||
<h5>Basic </h5>
|
||||
</a>
|
||||
</div>
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="responsive.html" class="demo-block">
|
||||
<h5>Responsive </h5>
|
||||
</a>
|
||||
</div>
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="center.html" class="demo-block">
|
||||
<h5>Center </h5>
|
||||
</a>
|
||||
</div>
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="merge.html" class="demo-block">
|
||||
<h5>Merge </h5>
|
||||
</a>
|
||||
</div>
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="autowidth.html" class="demo-block">
|
||||
<h5>Auto Width </h5>
|
||||
</a>
|
||||
</div>
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="urlhashnav.html" class="demo-block">
|
||||
<h5>Url Hash Navigation </h5>
|
||||
</a>
|
||||
</div>
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="events.html" class="demo-block">
|
||||
<h5>Events </h5>
|
||||
</a>
|
||||
</div>
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="stagepadding.html" class="demo-block">
|
||||
<h5>stagePadding </h5>
|
||||
</a>
|
||||
</div>
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="rtl.html" class="demo-block">
|
||||
<h5>Right To Left </h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 id="using-built-in-plugins">Using built-in plugins</h4>
|
||||
<hr>
|
||||
<div class="demo-list">
|
||||
<div class="row">
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="lazyLoad.html" class="demo-block">
|
||||
<h5>Lazy Load </h5>
|
||||
</a>
|
||||
</div>
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="video.html" class="demo-block">
|
||||
<h5>Video </h5>
|
||||
</a>
|
||||
</div>
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="animate.html" class="demo-block">
|
||||
<h5>Animate </h5>
|
||||
</a>
|
||||
</div>
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="autoplay.html" class="demo-block">
|
||||
<h5>Autoplay </h5>
|
||||
</a>
|
||||
</div>
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="autoheight.html" class="demo-block">
|
||||
<h5>Auto Height </h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 id="using-external-libraries">Using external libraries</h4>
|
||||
<hr>
|
||||
<div class="demo-list">
|
||||
<div class="row">
|
||||
<div class="small-6 medium-4 large-3 columns">
|
||||
<a href="mousewheel.html" class="demo-block">
|
||||
<h5>Mousewheel </h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Events usage demo">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Events Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Events</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<p>Notice that <code>initialize.owl.carousel</code> and <code>initialized.owl.carousel</code> events must be attached before Owl Carousel initialization. This is required only for those two.</p>
|
||||
<p><code>changed.owl.carousel</code> event is attached to the main Owl Carousel animation method so that every carousel move triggers this callback.</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Lazy Load carousel">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Lazy Load Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Lazy Load</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<p>Add lazyLoad to plugin setup:</p>
|
||||
<pre><code>lazyLoad: true</code></pre>
|
||||
<p>LazyLoad HTML structure requires <code>class="owl-lazy"</code> and <code>data-src="url_to_img"</code> or/and <code>data-src-retina="url_to_highres_img"</code>. If you set above settings not on <code><img></code> 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 <code>owl-lazy</code> class to the source tag and a data-srcset attribute.</p>
|
||||
<h3 id="setup">Setup</h3>
|
||||
<pre><code>$('.owl-carousel').owlCarousel({
|
||||
items:4,
|
||||
lazyLoad:true,
|
||||
loop:true,
|
||||
margin:10
|
||||
});</code></pre>
|
||||
<h3 id="option">Option</h3>
|
||||
<p>If you want to preload images you can also add the option <code>lazyLoadEager</code> to the settings object, where the value indicates how many items to the right (and left, when loop is <code>true</code>) will be pre-loaded.</p>
|
||||
<h3 id="html-">HTML:</h3>
|
||||
<pre><code><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></code></pre>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
$('.owl-carousel').owlCarousel({
|
||||
items: 1,
|
||||
lazyLoad: true,
|
||||
lazyLoadEager: 1,
|
||||
loop: true,
|
||||
margin: 10,
|
||||
autoHeight: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Merge Items">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Merge Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Merge</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<p>Merge option requires <code>data-merge="number_items_to_merge"</code> on any child element (can be nested as well). There is a sibling option called <code>mergeFit</code> which fits merged elements to screen size. </p>
|
||||
<p>See item 6 on breakpoint below and above <code>1000px</code> screen width.</p>
|
||||
<h3 id="setup">Setup</h3>
|
||||
<pre><code>$('.owl-carousel').owlCarousel({
|
||||
items:5,
|
||||
loop:true,
|
||||
margin:10,
|
||||
merge:true,
|
||||
responsive:{
|
||||
678:{
|
||||
mergeFit:true
|
||||
},
|
||||
1000:{
|
||||
mergeFit:false
|
||||
}
|
||||
}
|
||||
});</code></pre>
|
||||
<h3 id="html">html</h3>
|
||||
<pre><code><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></code></pre>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.owl-carousel').owlCarousel({
|
||||
items: 5,
|
||||
loop: true,
|
||||
margin: 10,
|
||||
merge: true,
|
||||
responsive: {
|
||||
678: {
|
||||
mergeFit: true
|
||||
},
|
||||
1000: {
|
||||
mergeFit: false
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,209 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Mousewheel usage demo">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Mousewheel Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Mousewheel</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<p>To add mouswheel scrolling just include the fantastic plugin jquery.mousewheel.js created by Brandon Aaron.
|
||||
<a href="https://github.com/brandonaaron/jquery-mousewheel">Link to plugin GitHub page</a>
|
||||
</p>
|
||||
<h3 id="setup">Setup</h3>
|
||||
<pre><code>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();
|
||||
});</code></pre>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="How to use responsive options">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Responsive Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Responsive</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<blockquote>
|
||||
<p>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.</p>
|
||||
</blockquote>
|
||||
<h4 id="about-responsive-option">About responsive option</h4>
|
||||
<p>Setting of the responsive is very simple. Structure of responsive option:</p>
|
||||
<pre><code>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,
|
||||
...
|
||||
}
|
||||
}</code></pre>
|
||||
<h3 id="key-facts-">Key facts:</h3>
|
||||
<ul>
|
||||
<li>Each breakpoint key can be a Number value (like in example) or a string: '480'.</li>
|
||||
<li>Owl has an in-built sort option but it’s best to set from the smallest screens to the widest.</li>
|
||||
<li>Responsive options <strong>always</strong> overwrite top level settings.</li>
|
||||
<li>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).</li>
|
||||
<li>If you have non flexible layout then set <code>responsive:false</code>.</li>
|
||||
</ul>
|
||||
<h3 id="live-example">Live Example</h3>
|
||||
<pre><code>$('.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
|
||||
}
|
||||
}
|
||||
})</code></pre>
|
||||
<hr>
|
||||
<h3 id="responsive-related-options-">Responsive related options:</h3>
|
||||
<h4 id="responsiveclass">responsiveClass</h4>
|
||||
<p>Optional helper class. Add 'owl-reponsive-' + 'breakpoint' class to main element.</p>
|
||||
<h4 id="responsivebaseelement">responsiveBaseElement</h4>
|
||||
<p>As default all responsive breakpoints are corresponding with <code>window</code> width. This option gives you an opportunity to change it to your own class/id like <code>responsiveBaseElement:".myCustomWrapper"</code></p>
|
||||
<h4 id="responsiverefreshrate">responsiveRefreshRate</h4>
|
||||
<p>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.</p>
|
||||
<p>As not every option is able to use responsive abilities, here’s a full list of responsive options.</p>
|
||||
<p>
|
||||
<div class="row">
|
||||
</p>
|
||||
<div class="large-6 columns">
|
||||
<h4 id="list-of-responsive-options">List of responsive options</h4>
|
||||
<ul>
|
||||
<li>items</li>
|
||||
<li>loop</li>
|
||||
<li>center</li>
|
||||
<li>mouseDrag</li>
|
||||
<li>touchDrag</li>
|
||||
<li>pullDrag</li>
|
||||
<li>freeDrag</li>
|
||||
<li>margin</li>
|
||||
<li>stagePadding</li>
|
||||
<li>merge</li>
|
||||
<li>mergeFit</li>
|
||||
<li>autoWidth</li>
|
||||
<li>autoHeight</li>
|
||||
<li>nav</li>
|
||||
<li>navRewind</li>
|
||||
<li>slideBy</li>
|
||||
<li>dots</li>
|
||||
<li>dotsEach</li>
|
||||
<li>autoplay</li>
|
||||
<li>autoplayTimeout</li>
|
||||
<li>smartSpeed</li>
|
||||
<li>fluidSpeed</li>
|
||||
<li>autoplaySpeed</li>
|
||||
<li>navSpeed</li>
|
||||
<li>dotsSpeed</li>
|
||||
<li>dragEndSpeed</li>
|
||||
<li>responsiveRefreshRate</li>
|
||||
<li>animateOut</li>
|
||||
<li>animateIn</li>
|
||||
<li>fallbackEasing</li>
|
||||
<li>callbacks</li>
|
||||
<li>info</li>
|
||||
<li>and all events</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="large-6 columns">
|
||||
<h4 id="list-of-responsive-only-on-load">List of responsive only on load</h4>
|
||||
<ul>
|
||||
<li>startPosition</li>
|
||||
<li>URLhashListener</li>
|
||||
<li>navText</li>
|
||||
<li>dotsData</li>
|
||||
<li>lazyLoad</li>
|
||||
<li>lazyContent</li>
|
||||
<li>autoplayHoverPause</li>
|
||||
<li>responsiveBaseElement</li>
|
||||
<li>responsiveClass</li>
|
||||
<li>video</li>
|
||||
<li>videoHeight</li>
|
||||
<li>videoWidth</li>
|
||||
<li>nestedItemSelector</li>
|
||||
<li>itemElement</li>
|
||||
<li>stageElement</li>
|
||||
<li>navContainer</li>
|
||||
<li>dotsContainer</li>
|
||||
<li>and all classes options</li>
|
||||
</ul>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="RTL usage demo">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
RTL Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Right To Left</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<p>By adding <code>rtl:true</code> Owl will change direction from Right to left.</p>
|
||||
<p>Default:</p>
|
||||
<pre><code>rtl: false</code></pre>
|
||||
<h3 id="setup">Setup</h3>
|
||||
<pre><code>$('.owl-carousel').owlCarousel({
|
||||
rtl:true,
|
||||
loop:true,
|
||||
margin:10,
|
||||
nav:true,
|
||||
responsive:{
|
||||
0:{
|
||||
items:1
|
||||
},
|
||||
600:{
|
||||
items:3
|
||||
},
|
||||
1000:{
|
||||
items:5
|
||||
}
|
||||
}
|
||||
})</code></pre>
|
||||
<h3 id="html">html</h3>
|
||||
<pre><code><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></code></pre>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Stage Padding usage demo">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Stage Padding Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>stagePadding</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<p>Stage padding option adds left and right padding style (in pixels) onto stage-wrapper.</p>
|
||||
<p>Option:</p>
|
||||
<pre><code>stagePadding: Number</code></pre>
|
||||
<h3 id="setup">Setup</h3>
|
||||
<pre><code>$('.owl-carousel').owlCarousel({
|
||||
stagePadding: 50,
|
||||
loop:true,
|
||||
margin:10,
|
||||
nav:true,
|
||||
responsive:{
|
||||
0:{
|
||||
items:1
|
||||
},
|
||||
600:{
|
||||
items:3
|
||||
},
|
||||
1000:{
|
||||
items:5
|
||||
}
|
||||
}
|
||||
})</code></pre>
|
||||
<h3 id="html">html</h3>
|
||||
<pre><code><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></code></pre>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Generic layout only for testing">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Test | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Test</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,190 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Url Hash Navigation usage demo">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Url Hash Navigation Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Url Hash Navigation</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<blockquote>
|
||||
<p>URLhashListener option is listening for url hash change and is looking for slide with the same data name e.g. <code>data-hash="zero"</code></p>
|
||||
</blockquote>
|
||||
<p>Also <code>startPosition</code> option accept string: <code>'URLHash'</code>. This will load corresponding items on startup. Browser history back button is also affected.</p>
|
||||
<h3 id="setup">Setup</h3>
|
||||
<pre><code> $('.owl-carousel').owlCarousel({
|
||||
items:4,
|
||||
loop:false,
|
||||
center:true,
|
||||
margin:10,
|
||||
URLhashListener:true,
|
||||
autoplayHoverPause:true,
|
||||
startPosition: 'URLHash'
|
||||
});</code></pre>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.owl-carousel').owlCarousel({
|
||||
items: 4,
|
||||
loop: false,
|
||||
center: true,
|
||||
margin: 10,
|
||||
callbacks: true,
|
||||
URLhashListener: true,
|
||||
autoplayHoverPause: true,
|
||||
startPosition: 'URLHash'
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,189 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Owl Carousel supports YouTube, Vimeo, and vzaar videos">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Video Demo | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Video</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demos -->
|
||||
<section id="demos">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<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>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<p>Enable video option:</p>
|
||||
<pre><code>video:true</code></pre>
|
||||
<p>To add video into carousel just put <code><a class="owl-video" href="_straight URL from YouTube, Vimeo, or vzaar"></a></code>.</p>
|
||||
<p>A tag is not mandatory, it can be any other tag but "owl-video" and href with url link is required.</p>
|
||||
<p>Additional video options:</p>
|
||||
<pre><code>videoWidth: false, // Default false; Type: Boolean/Number
|
||||
videoHeight: false, // Default false; Type: Boolean/Number</code></pre>
|
||||
<h3 id="setup">Setup</h3>
|
||||
<pre><code> $('.owl-carousel').owlCarousel({
|
||||
items:1,
|
||||
merge:true,
|
||||
loop:true,
|
||||
margin:10,
|
||||
video:true,
|
||||
lazyLoad:true,
|
||||
center:true,
|
||||
responsive:{
|
||||
480:{
|
||||
items:2
|
||||
},
|
||||
600:{
|
||||
items:4
|
||||
}
|
||||
}
|
||||
})</code></pre>
|
||||
<h3 id="html">html</h3>
|
||||
<pre><code><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></code></pre>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,227 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Owl Carousel Documentation">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Classes | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>API</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="docs">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-3 large-3 columns">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Getting Started</li>
|
||||
<li> <a href="started-welcome.html">Welcome</a> </li>
|
||||
<li> <a href="started-installation.html">Installation</a> </li>
|
||||
<li> <a href="started-faq.html">FAQ</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">API</li>
|
||||
<li> <a href="api-options.html">Options</a> </li>
|
||||
<li> <a href="api-classes.html">Classes</a> </li>
|
||||
<li> <a href="api-events.html">Events</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Development</li>
|
||||
<li> <a href="dev-buildin-plugins.html">Built-in Plugins</a> </li>
|
||||
<li> <a href="dev-plugin-api.html">Plugin API</a> </li>
|
||||
<li> <a href="dev-styles.html">Sass Styles</a> </li>
|
||||
<li> <a href="dev-external.html">External Libs</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Support</li>
|
||||
<li> <a href="support-contributing.html">Contributing</a> </li>
|
||||
<li> <a href="support-changelog.html">Changelog</a> </li>
|
||||
<li> <a href="support-contact.html">Contact</a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small-12 medium-9 large-9 columns">
|
||||
<article class="docs-content">
|
||||
<h2 id="classes">Classes</h2>
|
||||
<p>This is an example of how html is rendered. With the following options you can change almost every class the way you want</p>
|
||||
<pre><code><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></code></pre>
|
||||
<h3 id="options">Options</h3>
|
||||
<h4 id="refreshclass">refreshClass</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>owl-refresh</code></p>
|
||||
<p>Class during refresh.</p>
|
||||
<hr>
|
||||
<h4 id="loadingclass">loadingClass</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>owl-loading</code></p>
|
||||
<p>Class during load.</p>
|
||||
<hr>
|
||||
<h4 id="loadedclass">loadedClass</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>owl-loaded</code></p>
|
||||
<p>Class after load.</p>
|
||||
<hr>
|
||||
<h4 id="rtlclass">rtlClass</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>owl-rtl</code></p>
|
||||
<p>Class for right to left mode.</p>
|
||||
<hr>
|
||||
<h4 id="dragclass">dragClass</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>owl-drag</code></p>
|
||||
<p>Class for mouse drag mode.</p>
|
||||
<hr>
|
||||
<h4 id="grabclass">grabClass</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>owl-grab</code></p>
|
||||
<p>Class during mouse drag.</p>
|
||||
<hr>
|
||||
<h4 id="stageclass">stageClass</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>owl-stage</code></p>
|
||||
<p>Stage class.</p>
|
||||
<hr>
|
||||
<h4 id="stageouterclass">stageOuterClass</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>owl-stage-outer</code></p>
|
||||
<p>Stage outer class.</p>
|
||||
<hr>
|
||||
<h4 id="navcontainerclass">navContainerClass</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>owl-nav</code></p>
|
||||
<p>Navigation container class.</p>
|
||||
<hr>
|
||||
<h4 id="navclass">navClass</h4>
|
||||
<p>Type: <code>Array</code>
|
||||
<br /> Default: <code>[&#x27;owl-prev&#x27;,&#x27;owl-next&#x27;]</code></p>
|
||||
<p>Navigation buttons classes.</p>
|
||||
<hr>
|
||||
<h4 id="dotclass">dotClass</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>owl-dot</code></p>
|
||||
<p>Dot Class.</p>
|
||||
<hr>
|
||||
<h4 id="dotsclass">dotsClass</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>owl-dots</code></p>
|
||||
<p>Dots container class.</p>
|
||||
<hr>
|
||||
<h4 id="autoheightclass">autoHeightClass</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>owl-height</code></p>
|
||||
<p>Auto height class.</p>
|
||||
<hr>
|
||||
<h4 id="responsiveclass">responsiveClass</h4>
|
||||
<p>Type: <code>String|Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Optional helper class. Add '<responsiveClass>-<breakpoint>' class to main element. Can be used to stylize content on given breakpoint.</p>
|
||||
<hr>
|
||||
<h3 id="next-step">Next Step</h3>
|
||||
<h4 id="-events-api-events-html-">
|
||||
<a href="api-events.html">Events</a>
|
||||
</h4>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,358 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Owl Carousel Documentation">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Events | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>API</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="docs">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-3 large-3 columns">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Getting Started</li>
|
||||
<li> <a href="started-welcome.html">Welcome</a> </li>
|
||||
<li> <a href="started-installation.html">Installation</a> </li>
|
||||
<li> <a href="started-faq.html">FAQ</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">API</li>
|
||||
<li> <a href="api-options.html">Options</a> </li>
|
||||
<li> <a href="api-classes.html">Classes</a> </li>
|
||||
<li> <a href="api-events.html">Events</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Development</li>
|
||||
<li> <a href="dev-buildin-plugins.html">Built-in Plugins</a> </li>
|
||||
<li> <a href="dev-plugin-api.html">Plugin API</a> </li>
|
||||
<li> <a href="dev-styles.html">Sass Styles</a> </li>
|
||||
<li> <a href="dev-external.html">External Libs</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Support</li>
|
||||
<li> <a href="support-contributing.html">Contributing</a> </li>
|
||||
<li> <a href="support-changelog.html">Changelog</a> </li>
|
||||
<li> <a href="support-contact.html">Contact</a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small-12 medium-9 large-9 columns">
|
||||
<article class="docs-content">
|
||||
<h2 id="events">Events</h2>
|
||||
<blockquote>
|
||||
<p>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.</p>
|
||||
</blockquote>
|
||||
<pre><code>var owl = $('.owl-carousel');
|
||||
owl.owlCarousel();
|
||||
// Listen to owl events:
|
||||
owl.on('changed.owl.carousel', function(event) {
|
||||
...
|
||||
})</code></pre>
|
||||
<p>You could also trigger events by yourself to control Owl Carousel:</p>
|
||||
<pre><code>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]);
|
||||
})</code></pre>
|
||||
<h3 id="callbacks">Callbacks</h3>
|
||||
<p>Instead of attaching an event handler you can also just add a callback to the options of Owl Carousel.</p>
|
||||
<pre><code>$('.owl-carousel').owlCarousel({
|
||||
onDragged: callback
|
||||
});
|
||||
function callback(event) {
|
||||
...
|
||||
}</code></pre>
|
||||
<h3 id="data">Data</h3>
|
||||
<p>Each event passes very useful information within the
|
||||
<a href="https://api.jquery.com/category/events/event-object/">event object</a> . Based on the example above:</p>
|
||||
<pre><code class="language-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
|
||||
}</code></pre>
|
||||
<h3 id="carousel">Carousel</h3>
|
||||
<h4 id="initialize-owl-carousel">initialize.owl.carousel</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onInitialize</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When the plugin initializes.</p>
|
||||
<hr>
|
||||
<h4 id="initialized-owl-carousel">initialized.owl.carousel</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onInitialized</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When the plugin has initialized.</p>
|
||||
<hr>
|
||||
<h4 id="resize-owl-carousel">resize.owl.carousel</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onResize</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When the plugin gets resized.</p>
|
||||
<hr>
|
||||
<h4 id="resized-owl-carousel">resized.owl.carousel</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onResized</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When the plugin has resized.</p>
|
||||
<hr>
|
||||
<h4 id="refresh-owl-carousel">refresh.owl.carousel</h4>
|
||||
<p>Type: <code>attachable, cancelable, triggerable</code>
|
||||
<br />Callback: <code>onRefresh</code>
|
||||
<br/>Parameter: <code>[event, speed]</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When the internal state of the plugin needs update.</p>
|
||||
<hr>
|
||||
<h4 id="refreshed-owl-carousel">refreshed.owl.carousel</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onRefreshed</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When the internal state of the plugin has updated.</p>
|
||||
<hr>
|
||||
<h4 id="drag-owl-carousel">drag.owl.carousel</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onDrag</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When the dragging of an item is started.</p>
|
||||
<hr>
|
||||
<h4 id="dragged-owl-carousel">dragged.owl.carousel</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onDragged</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When the dragging of an item has finished.</p>
|
||||
<hr>
|
||||
<h4 id="translate-owl-carousel">translate.owl.carousel</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onTranslate</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When the translation of the stage starts.</p>
|
||||
<hr>
|
||||
<h4 id="translated-owl-carousel">translated.owl.carousel</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onTranslated</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When the translation of the stage has finished.</p>
|
||||
<hr>
|
||||
<h4 id="change-owl-carousel">change.owl.carousel</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onChange</code>
|
||||
<br/>Parameter: <code>property</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When a property is going to change its value.</p>
|
||||
<hr>
|
||||
<h4 id="changed-owl-carousel">changed.owl.carousel</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onChanged</code>
|
||||
<br/>Parameter: <code>property</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When a property has changed its value.</p>
|
||||
<hr>
|
||||
<h4 id="next-owl-carousel">next.owl.carousel</h4>
|
||||
<p>Type: <code>triggerable</code>
|
||||
<br />Parameter: <code>[speed]</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>Goes to next item.</p>
|
||||
<hr>
|
||||
<h4 id="prev-owl-carousel">prev.owl.carousel</h4>
|
||||
<p>Type: <code>triggerable</code>
|
||||
<br />Parameter: <code>[speed]</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>Goes to previous item.</p>
|
||||
<hr>
|
||||
<h4 id="to-owl-carousel">to.owl.carousel</h4>
|
||||
<p>Type: <code>triggerable</code>
|
||||
<br />Parameter: <code>[position, speed]</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>Goes to position.</p>
|
||||
<hr>
|
||||
<h4 id="destroy-owl-carousel">destroy.owl.carousel</h4>
|
||||
<p>Type: <code>triggerable</code>
|
||||
<br />
|
||||
</p>
|
||||
<p>Destroys carousel.</p>
|
||||
<hr>
|
||||
<h4 id="replace-owl-carousel">replace.owl.carousel</h4>
|
||||
<p>Type: <code>triggerable</code>
|
||||
<br />Parameter: <code>data</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>Removes current content and add a new one passed in the parameter.</p>
|
||||
<hr>
|
||||
<h4 id="add-owl-carousel">add.owl.carousel</h4>
|
||||
<p>Type: <code>triggerable</code>
|
||||
<br />Parameter: <code>[data, position]</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>Adds a new item on a given position.</p>
|
||||
<hr>
|
||||
<h4 id="remove-owl-carousel">remove.owl.carousel</h4>
|
||||
<p>Type: <code>triggerable</code>
|
||||
<br />Parameter: <code>position</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>Removes an item from a given position.</p>
|
||||
<hr>
|
||||
<h3 id="lazy">Lazy</h3>
|
||||
<h4 id="load-owl-lazy">load.owl.lazy</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onLoadLazy</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When lazy image loads.</p>
|
||||
<hr>
|
||||
<h4 id="loaded-owl-lazy">loaded.owl.lazy</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onLoadedLazy</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When lazy image has loaded.</p>
|
||||
<hr>
|
||||
<h3 id="autoplay">Autoplay</h3>
|
||||
<h4 id="play-owl-autoplay">play.owl.autoplay</h4>
|
||||
<p>Type: <code>triggerable</code>
|
||||
<br />Parameter: <code>[timeout, speed]</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>Runs autoplay.</p>
|
||||
<hr>
|
||||
<h4 id="stop-owl-autoplay">stop.owl.autoplay</h4>
|
||||
<p>Type: <code>triggerable</code>
|
||||
<br />
|
||||
</p>
|
||||
<p>Stops autoplay.</p>
|
||||
<hr>
|
||||
<h3 id="video">Video</h3>
|
||||
<h4 id="stop-owl-video">stop.owl.video</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onStopVideo</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When video has unloaded.</p>
|
||||
<hr>
|
||||
<h4 id="play-owl-video">play.owl.video</h4>
|
||||
<p>Type: <code>attachable</code>
|
||||
<br />Callback: <code>onPlayVideo</code>
|
||||
<br/>
|
||||
</p>
|
||||
<p>When video has loaded.</p>
|
||||
<hr>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,395 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Owl Carousel Documentation">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Options | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>API</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="docs">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-3 large-3 columns">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Getting Started</li>
|
||||
<li> <a href="started-welcome.html">Welcome</a> </li>
|
||||
<li> <a href="started-installation.html">Installation</a> </li>
|
||||
<li> <a href="started-faq.html">FAQ</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">API</li>
|
||||
<li> <a href="api-options.html">Options</a> </li>
|
||||
<li> <a href="api-classes.html">Classes</a> </li>
|
||||
<li> <a href="api-events.html">Events</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Development</li>
|
||||
<li> <a href="dev-buildin-plugins.html">Built-in Plugins</a> </li>
|
||||
<li> <a href="dev-plugin-api.html">Plugin API</a> </li>
|
||||
<li> <a href="dev-styles.html">Sass Styles</a> </li>
|
||||
<li> <a href="dev-external.html">External Libs</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Support</li>
|
||||
<li> <a href="support-contributing.html">Contributing</a> </li>
|
||||
<li> <a href="support-changelog.html">Changelog</a> </li>
|
||||
<li> <a href="support-contact.html">Contact</a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small-12 medium-9 large-9 columns">
|
||||
<article class="docs-content">
|
||||
<h2 id="options">Options</h2>
|
||||
<blockquote>
|
||||
<p>List including all options from built-in plugins video, lazyload, autoheight and animate.</p>
|
||||
</blockquote>
|
||||
<h4 id="items">items</h4>
|
||||
<p>Type: <code>Number</code>
|
||||
<br /> Default: <code>3</code></p>
|
||||
<p>The number of items you want to see on the screen.</p>
|
||||
<hr>
|
||||
<h4 id="margin">margin</h4>
|
||||
<p>Type: <code>Number</code>
|
||||
<br /> Default: <code>0</code></p>
|
||||
<p>margin-right(px) on item.</p>
|
||||
<hr>
|
||||
<h4 id="loop">loop</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Infinity loop. Duplicate last and first items to get loop illusion.</p>
|
||||
<hr>
|
||||
<h4 id="center">center</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Center item. Works well with even an odd number of items.</p>
|
||||
<hr>
|
||||
<h4 id="mousedrag">mouseDrag</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>true</code></p>
|
||||
<p>Mouse drag enabled.</p>
|
||||
<hr>
|
||||
<h4 id="touchdrag">touchDrag</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>true</code></p>
|
||||
<p>Touch drag enabled.</p>
|
||||
<hr>
|
||||
<h4 id="pulldrag">pullDrag</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>true</code></p>
|
||||
<p>Stage pull to edge.</p>
|
||||
<hr>
|
||||
<h4 id="freedrag">freeDrag</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Item pull to edge.</p>
|
||||
<hr>
|
||||
<h4 id="stagepadding">stagePadding</h4>
|
||||
<p>Type: <code>Number</code>
|
||||
<br /> Default: <code>0</code></p>
|
||||
<p>Padding left and right on stage (can see neighbours).</p>
|
||||
<hr>
|
||||
<h4 id="merge">merge</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Merge items. Looking for data-merge='{number}' inside item..</p>
|
||||
<hr>
|
||||
<h4 id="mergefit">mergeFit</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>true</code></p>
|
||||
<p>Fit merged items if screen is smaller than items value.</p>
|
||||
<hr>
|
||||
<h4 id="autowidth">autoWidth</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Set non grid content. Try using width style on divs.</p>
|
||||
<hr>
|
||||
<h4 id="startposition">startPosition</h4>
|
||||
<p>Type: <code>Number/String</code>
|
||||
<br /> Default: <code>0</code></p>
|
||||
<p>Start position or URL Hash string like '#id'.</p>
|
||||
<hr>
|
||||
<h4 id="urlhashlistener">URLhashListener</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Listen to url hash changes. data-hash on items is required.</p>
|
||||
<hr>
|
||||
<h4 id="nav">nav</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Show next/prev buttons.</p>
|
||||
<hr>
|
||||
<h4 id="rewind">rewind</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>true</code></p>
|
||||
<p>Go backwards when the boundary has reached.</p>
|
||||
<hr>
|
||||
<h4 id="navtext">navText</h4>
|
||||
<p>Type: <code>Array</code>
|
||||
<br /> Default: <code>[&#x27;next&#x27;,&#x27;prev&#x27;]</code></p>
|
||||
<p>HTML allowed.</p>
|
||||
<hr>
|
||||
<h4 id="navelement">navElement</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>div</code></p>
|
||||
<p>DOM element type for a single directional navigation link.</p>
|
||||
<hr>
|
||||
<h4 id="slideby">slideBy</h4>
|
||||
<p>Type: <code>Number/String</code>
|
||||
<br /> Default: <code>1</code></p>
|
||||
<p>Navigation slide by x. 'page' string can be set to slide by page.</p>
|
||||
<hr>
|
||||
<h4 id="slidetransition">slideTransition</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: ``</p>
|
||||
<p>You can define the transition for the stage you want to use eg. linear.</p>
|
||||
<hr>
|
||||
<h4 id="dots">dots</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>true</code></p>
|
||||
<p>Show dots navigation.</p>
|
||||
<hr>
|
||||
<h4 id="dotseach">dotsEach</h4>
|
||||
<p>Type: <code>Number/Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Show dots each x item.</p>
|
||||
<hr>
|
||||
<h4 id="dotsdata">dotsData</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Used by data-dot content.</p>
|
||||
<hr>
|
||||
<h4 id="lazyload">lazyLoad</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not <img></p>
|
||||
<hr>
|
||||
<h4 id="lazyloadeager">lazyLoadEager</h4>
|
||||
<p>Type: <code>Number</code>
|
||||
<br /> Default: <code>0</code></p>
|
||||
<p>Eagerly pre-loads images to the right (and left when loop is enabled) based on how many items you want to preload.</p>
|
||||
<hr>
|
||||
<h4 id="autoplay">autoplay</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Autoplay.</p>
|
||||
<hr>
|
||||
<h4 id="autoplaytimeout">autoplayTimeout</h4>
|
||||
<p>Type: <code>Number</code>
|
||||
<br /> Default: <code>5000</code></p>
|
||||
<p>Autoplay interval timeout.</p>
|
||||
<hr>
|
||||
<h4 id="autoplayhoverpause">autoplayHoverPause</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Pause on mouse hover.</p>
|
||||
<hr>
|
||||
<h4 id="smartspeed">smartSpeed</h4>
|
||||
<p>Type: <code>Number</code>
|
||||
<br /> Default: <code>250</code></p>
|
||||
<p>Speed Calculate. More info to come..</p>
|
||||
<hr>
|
||||
<h4 id="fluidspeed">fluidSpeed</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>Number</code></p>
|
||||
<p>Speed Calculate. More info to come..</p>
|
||||
<hr>
|
||||
<h4 id="autoplayspeed">autoplaySpeed</h4>
|
||||
<p>Type: <code>Number/Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>autoplay speed.</p>
|
||||
<hr>
|
||||
<h4 id="navspeed">navSpeed</h4>
|
||||
<p>Type: <code>Number/Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Navigation speed.</p>
|
||||
<hr>
|
||||
<h4 id="dotsspeed">dotsSpeed</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>Number/Boolean</code></p>
|
||||
<p>Pagination speed.</p>
|
||||
<hr>
|
||||
<h4 id="dragendspeed">dragEndSpeed</h4>
|
||||
<p>Type: <code>Number/Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Drag end speed.</p>
|
||||
<hr>
|
||||
<h4 id="callbacks">callbacks</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>true</code></p>
|
||||
<p>Enable callback events.</p>
|
||||
<hr>
|
||||
<h4 id="responsive">responsive</h4>
|
||||
<p>Type: <code>Object</code>
|
||||
<br /> Default: <code>empty object</code></p>
|
||||
<p>Object containing responsive options. Can be set to false to remove responsive capabilities.</p>
|
||||
<hr>
|
||||
<h4 id="responsiverefreshrate">responsiveRefreshRate</h4>
|
||||
<p>Type: <code>Number</code>
|
||||
<br /> Default: <code>200</code></p>
|
||||
<p>Responsive refresh rate.</p>
|
||||
<hr>
|
||||
<h4 id="responsivebaseelement">responsiveBaseElement</h4>
|
||||
<p>Type: <code>DOM element</code>
|
||||
<br /> Default: <code>window</code></p>
|
||||
<p>Set on any DOM element. If you care about non responsive browser (like ie8) then use it on main wrapper. This will prevent from crazy resizing.</p>
|
||||
<hr>
|
||||
<h4 id="video">video</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Enable fetching YouTube/Vimeo/Vzaar videos.</p>
|
||||
<hr>
|
||||
<h4 id="videoheight">videoHeight</h4>
|
||||
<p>Type: <code>Number/Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Set height for videos.</p>
|
||||
<hr>
|
||||
<h4 id="videowidth">videoWidth</h4>
|
||||
<p>Type: <code>Number/Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Set width for videos.</p>
|
||||
<hr>
|
||||
<h4 id="animateout">animateOut</h4>
|
||||
<p>Type: <code>String/Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Class for CSS3 animation out.</p>
|
||||
<hr>
|
||||
<h4 id="animatein">animateIn</h4>
|
||||
<p>Type: <code>String/Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Class for CSS3 animation in.</p>
|
||||
<hr>
|
||||
<h4 id="fallbackeasing">fallbackEasing</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>swing</code></p>
|
||||
<p>Easing for CSS2 $.animate.</p>
|
||||
<hr>
|
||||
<h4 id="info">info</h4>
|
||||
<p>Type: <code>Function</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.</p>
|
||||
<hr>
|
||||
<h4 id="nesteditemselector">nestedItemSelector</h4>
|
||||
<p>Type: <code>String/Class</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Use it if owl items are deep nested inside some generated content. E.g 'youritem'. Dont use dot before class name.</p>
|
||||
<hr>
|
||||
<h4 id="itemelement">itemElement</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>div</code></p>
|
||||
<p>DOM element type for owl-item.</p>
|
||||
<hr>
|
||||
<h4 id="stageelement">stageElement</h4>
|
||||
<p>Type: <code>String</code>
|
||||
<br /> Default: <code>div</code></p>
|
||||
<p>DOM element type for owl-stage.</p>
|
||||
<hr>
|
||||
<h4 id="navcontainer">navContainer</h4>
|
||||
<p>Type: <code>String/Class/ID/Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Set your own container for nav.</p>
|
||||
<hr>
|
||||
<h4 id="dotscontainer">dotsContainer</h4>
|
||||
<p>Type: <code>String/Class/ID/Boolean</code>
|
||||
<br /> Default: <code>false</code></p>
|
||||
<p>Set your own container for nav.</p>
|
||||
<hr>
|
||||
<h4 id="checkvisible">checkVisible</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
<br /> Default: <code>true</code></p>
|
||||
<p>If you know the carousel will always be visible you can set `checkVisibility` to `false` to prevent the expensive browser layout forced reflow the $element.is(':visible') does.</p>
|
||||
<hr>
|
||||
<h3 id="next-step">Next Step</h3>
|
||||
<h4 id="-classes-api-classes-html-">
|
||||
<a href="api-classes.html">Classes</a>
|
||||
</h4>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Owl Carousel Documentation">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Built-in Plugins | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Development</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="docs">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-3 large-3 columns">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Getting Started</li>
|
||||
<li> <a href="started-welcome.html">Welcome</a> </li>
|
||||
<li> <a href="started-installation.html">Installation</a> </li>
|
||||
<li> <a href="started-faq.html">FAQ</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">API</li>
|
||||
<li> <a href="api-options.html">Options</a> </li>
|
||||
<li> <a href="api-classes.html">Classes</a> </li>
|
||||
<li> <a href="api-events.html">Events</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Development</li>
|
||||
<li> <a href="dev-buildin-plugins.html">Built-in Plugins</a> </li>
|
||||
<li> <a href="dev-plugin-api.html">Plugin API</a> </li>
|
||||
<li> <a href="dev-styles.html">Sass Styles</a> </li>
|
||||
<li> <a href="dev-external.html">External Libs</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Support</li>
|
||||
<li> <a href="support-contributing.html">Contributing</a> </li>
|
||||
<li> <a href="support-changelog.html">Changelog</a> </li>
|
||||
<li> <a href="support-contact.html">Contact</a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small-12 medium-9 large-9 columns">
|
||||
<article class="docs-content">
|
||||
<h2 id="built-in-plugins">Built-in Plugins</h2>
|
||||
<blockquote>
|
||||
<p>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</p>
|
||||
</blockquote>
|
||||
<h3 id="plugins-included">Plugins included</h3>
|
||||
<p>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
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2">Github</a> and fork/download the source project</p>
|
||||
<pre><code>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</code></pre>
|
||||
<blockquote>
|
||||
<p>
|
||||
<a href="../demos/demos.html#using-built-in-plugins">See demos of built-in plugins</a>
|
||||
</p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<p>Big thanks to
|
||||
<a href="https://github.com/witrin">Artus Kolanowski</a> for helping me with modular structure and for providing best practice with developing the code.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Owl Carousel Documentation">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
External Libs | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Development</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="docs">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-3 large-3 columns">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Getting Started</li>
|
||||
<li> <a href="started-welcome.html">Welcome</a> </li>
|
||||
<li> <a href="started-installation.html">Installation</a> </li>
|
||||
<li> <a href="started-faq.html">FAQ</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">API</li>
|
||||
<li> <a href="api-options.html">Options</a> </li>
|
||||
<li> <a href="api-classes.html">Classes</a> </li>
|
||||
<li> <a href="api-events.html">Events</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Development</li>
|
||||
<li> <a href="dev-buildin-plugins.html">Built-in Plugins</a> </li>
|
||||
<li> <a href="dev-plugin-api.html">Plugin API</a> </li>
|
||||
<li> <a href="dev-styles.html">Sass Styles</a> </li>
|
||||
<li> <a href="dev-external.html">External Libs</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Support</li>
|
||||
<li> <a href="support-contributing.html">Contributing</a> </li>
|
||||
<li> <a href="support-changelog.html">Changelog</a> </li>
|
||||
<li> <a href="support-contact.html">Contact</a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small-12 medium-9 large-9 columns">
|
||||
<article class="docs-content">
|
||||
<h2 id="external-libraries">External Libraries</h2>
|
||||
<blockquote>
|
||||
<p>Why not try Owl with other fantastic open source libraries? Check the list of plugins I've used in some of the demos.</p>
|
||||
</blockquote>
|
||||
<h3 id="animate-css">animate.css</h3>
|
||||
<p>This is an awesome library created by Daniel Eden of CSS3 animations that perfectly works with animate functions.</p>
|
||||
<ul>
|
||||
<li> <a href="https://daneden.github.io/animate.css/">Visit Animate.css website</a> </li>
|
||||
<li> <a href="/demos/animate.html">See Owl animate demo</a> </li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3 id="mouse-wheel-js">mouse.wheel.js</h3>
|
||||
<p>A jQuery plugin created by Brandon Aaron that adds cross-browser mouse wheel support with delta normalization.</p>
|
||||
<ul>
|
||||
<li> <a href="https://github.com/brandonaaron/jquery-mousewheel">Visit jQuery Mousewheel website</a> </li>
|
||||
<li> <a href="/demos/mousewheel.html">See Owl mousewheel demo</a> </li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p>Let me know if you find any useful plugins that fits to Owl.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Owl Carousel Documentation">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Plugin API | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Development</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="docs">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-3 large-3 columns">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Getting Started</li>
|
||||
<li> <a href="started-welcome.html">Welcome</a> </li>
|
||||
<li> <a href="started-installation.html">Installation</a> </li>
|
||||
<li> <a href="started-faq.html">FAQ</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">API</li>
|
||||
<li> <a href="api-options.html">Options</a> </li>
|
||||
<li> <a href="api-classes.html">Classes</a> </li>
|
||||
<li> <a href="api-events.html">Events</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Development</li>
|
||||
<li> <a href="dev-buildin-plugins.html">Built-in Plugins</a> </li>
|
||||
<li> <a href="dev-plugin-api.html">Plugin API</a> </li>
|
||||
<li> <a href="dev-styles.html">Sass Styles</a> </li>
|
||||
<li> <a href="dev-external.html">External Libs</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Support</li>
|
||||
<li> <a href="support-contributing.html">Contributing</a> </li>
|
||||
<li> <a href="support-changelog.html">Changelog</a> </li>
|
||||
<li> <a href="support-contact.html">Contact</a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small-12 medium-9 large-9 columns">
|
||||
<article class="docs-content">
|
||||
<h2 id="plugin-api">Plugin API</h2>
|
||||
<blockquote>
|
||||
<p>Plugin API allows you to extend carousel object constructor and use internal functions and variables. Use callback events to communicate between host and plugin.</p>
|
||||
</blockquote>
|
||||
<p>Plugin scaffolding:</p>
|
||||
<pre><code>/**
|
||||
* 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 );</code></pre>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Owl Carousel Documentation">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Sass Styles | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Development</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="docs">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-3 large-3 columns">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Getting Started</li>
|
||||
<li> <a href="started-welcome.html">Welcome</a> </li>
|
||||
<li> <a href="started-installation.html">Installation</a> </li>
|
||||
<li> <a href="started-faq.html">FAQ</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">API</li>
|
||||
<li> <a href="api-options.html">Options</a> </li>
|
||||
<li> <a href="api-classes.html">Classes</a> </li>
|
||||
<li> <a href="api-events.html">Events</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Development</li>
|
||||
<li> <a href="dev-buildin-plugins.html">Built-in Plugins</a> </li>
|
||||
<li> <a href="dev-plugin-api.html">Plugin API</a> </li>
|
||||
<li> <a href="dev-styles.html">Sass Styles</a> </li>
|
||||
<li> <a href="dev-external.html">External Libs</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Support</li>
|
||||
<li> <a href="support-contributing.html">Contributing</a> </li>
|
||||
<li> <a href="support-changelog.html">Changelog</a> </li>
|
||||
<li> <a href="support-contact.html">Contact</a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small-12 medium-9 large-9 columns">
|
||||
<article class="docs-content">
|
||||
<h2 id="using-sass">Using Sass</h2>
|
||||
<blockquote>
|
||||
<p>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
|
||||
<a href="http://sass-lang.com/">website</a> and you’ll love it. Owl uses a faster adaptation of Sass written in C,
|
||||
<a href="http://libsass.org/">libsass</a> (via
|
||||
<a href="https://github.com/sindresorhus/grunt-sass">grunt-sass</a> ), that doesn't require a Ruby dependency for our build process.</p>
|
||||
</blockquote>
|
||||
<p>To build the CSS from its Sass source, it’s required to have:</p>
|
||||
<ul>
|
||||
<li> <a href="https://nodejs.org/">Node.js</a> </li>
|
||||
<li> <a href="http://gruntjs.com/">Grunt</a> </li>
|
||||
</ul>
|
||||
<p>Check this
|
||||
<a href="https://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/">tutorial</a> to learn how to use Sass and libsass in Grunt environment.</p>
|
||||
<h3 id="scss-files-included">SCSS Files included</h3>
|
||||
<p>Source files can be found on
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2">Github Project</a>
|
||||
</p>
|
||||
<pre><code>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</code></pre>
|
||||
<h3 id="_mixins-scss">_mixins.scss</h3>
|
||||
<p>_mixins contain basic snippets generators for CSS3 cross-browser styles.</p>
|
||||
<h3 id="_theme-scss">_theme.scss</h3>
|
||||
<p>Scss structure for theme. Use owl.carousel.default.scss to change variables and generate new styles.</p>
|
||||
<h3 id="owl-carousel-scss">owl.carousel.scss</h3>
|
||||
<p>Core file to handle basic styles and override some unnecessary browsers behaviors. You shouldn’t change this file unless you have to.</p>
|
||||
<h3 id="owl-pluginname-scss">owl.[pluginname].scss</h3>
|
||||
<p>Styles for modules.</p>
|
||||
<h3 id="owl-theme-scss">owl.theme.*.scss</h3>
|
||||
<p>Theme files for dots and navigations buttons. Use <code>owl.theme.default.scss</code> to upgrade to your own styles or create a new theme.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Owl Carousel Documentation">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
FAQ | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Getting Started</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="docs">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-3 large-3 columns">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Getting Started</li>
|
||||
<li> <a href="started-welcome.html">Welcome</a> </li>
|
||||
<li> <a href="started-installation.html">Installation</a> </li>
|
||||
<li> <a href="started-faq.html">FAQ</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">API</li>
|
||||
<li> <a href="api-options.html">Options</a> </li>
|
||||
<li> <a href="api-classes.html">Classes</a> </li>
|
||||
<li> <a href="api-events.html">Events</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Development</li>
|
||||
<li> <a href="dev-buildin-plugins.html">Built-in Plugins</a> </li>
|
||||
<li> <a href="dev-plugin-api.html">Plugin API</a> </li>
|
||||
<li> <a href="dev-styles.html">Sass Styles</a> </li>
|
||||
<li> <a href="dev-external.html">External Libs</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Support</li>
|
||||
<li> <a href="support-contributing.html">Contributing</a> </li>
|
||||
<li> <a href="support-changelog.html">Changelog</a> </li>
|
||||
<li> <a href="support-contact.html">Contact</a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small-12 medium-9 large-9 columns">
|
||||
<article class="docs-content">
|
||||
<h2 id="faq">FAQ</h2>
|
||||
<hr>
|
||||
<p>Before you ask a question in the comments/via email please read the FAQs:</p>
|
||||
<h4 id="can-i-use-it-for-free-">Can i use it for free?</h4>
|
||||
<p>Yes!</p>
|
||||
<hr>
|
||||
<h4 id="can-i-use-it-for-ecommerce-">Can i use it for ecommerce?</h4>
|
||||
<p>Yes!</p>
|
||||
<hr>
|
||||
<h4 id="has-it-any-licence-">Has it any licence?</h4>
|
||||
<p>MIT</p>
|
||||
<hr>
|
||||
<h4 id="can-i-use-many-owls-on-one-page-">Can i use many owls on one page?</h4>
|
||||
<p>Yes, however remember that you can use only one unique ID on single page.</p>
|
||||
<hr>
|
||||
<h4 id="can-i-ask-for-a-new-functionality-">Can i ask for a new functionality?</h4>
|
||||
<p>Yes! Go to
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/issues">Github</a> issues page and ask for a feature.</p>
|
||||
<hr>
|
||||
<h4 id="i-need-help-">I need help!</h4>
|
||||
<p>First visit
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/issues">Github</a>, then look again at documentation and demos. Don't forget to add
|
||||
<a href="https://jsfiddle.net/">jsfiddle</a> or a link to your demo/example website!</p>
|
||||
<hr>
|
||||
<h4 id="does-it-have-infinity-scroll-circle-loop-slides-">Does it have infinity scroll/circle/loop slides?</h4>
|
||||
<p>Yes, finally it does.</p>
|
||||
<hr>
|
||||
<h4 id="what-s-new-in-latest-release-">What's new in latest release?</h4>
|
||||
<p>See Changelog</p>
|
||||
<hr>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Owl Carousel Documentation">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Installation | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Getting Started</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="docs">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-3 large-3 columns">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Getting Started</li>
|
||||
<li> <a href="started-welcome.html">Welcome</a> </li>
|
||||
<li> <a href="started-installation.html">Installation</a> </li>
|
||||
<li> <a href="started-faq.html">FAQ</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">API</li>
|
||||
<li> <a href="api-options.html">Options</a> </li>
|
||||
<li> <a href="api-classes.html">Classes</a> </li>
|
||||
<li> <a href="api-events.html">Events</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Development</li>
|
||||
<li> <a href="dev-buildin-plugins.html">Built-in Plugins</a> </li>
|
||||
<li> <a href="dev-plugin-api.html">Plugin API</a> </li>
|
||||
<li> <a href="dev-styles.html">Sass Styles</a> </li>
|
||||
<li> <a href="dev-external.html">External Libs</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Support</li>
|
||||
<li> <a href="support-contributing.html">Contributing</a> </li>
|
||||
<li> <a href="support-changelog.html">Changelog</a> </li>
|
||||
<li> <a href="support-contact.html">Contact</a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small-12 medium-9 large-9 columns">
|
||||
<article class="docs-content">
|
||||
<h2 id="installation">Installation</h2>
|
||||
<hr>
|
||||
<h3 id="include-css">Include CSS</h3>
|
||||
<p>First, include two CSS files into your HTML head:</p>
|
||||
<pre><code><link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css"></code></pre>
|
||||
<blockquote>
|
||||
<p><code>owl.carousel.css</code> file is required and should be included before any *.js files.</p>
|
||||
</blockquote>
|
||||
<p>Second <code>owl.theme.default.css</code> 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
|
||||
<a href="http://sass-lang.com/">SCSS</a> files for easy generation of your own themes.</p>
|
||||
<h3 id="include-js">Include JS</h3>
|
||||
<p>Yep, include jQuery and <code>owl.carousel.min.js</code> into the footer.</p>
|
||||
<pre><code><script src="jquery.min.js"></script>
|
||||
<script src="owlcarousel/owl.carousel.min.js"></script></code></pre>
|
||||
<h3 id="set-html">Set HTML</h3>
|
||||
<p>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 <code><div class="owl-carousel"></code>. 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.</p>
|
||||
<pre><code><!-- 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></code></pre>
|
||||
<h3 id="call-the-plugin">Call the plugin</h3>
|
||||
<p>Now call the Owl initializer function and your carousel is ready.</p>
|
||||
<pre><code>$(document).ready(function(){
|
||||
$(".owl-carousel").owlCarousel();
|
||||
});</code></pre>
|
||||
<blockquote>
|
||||
<p>See
|
||||
<a href="/OwlCarousel2/demos/demos.html">demos</a> for customisation and options usage.</p>
|
||||
</blockquote>
|
||||
<h3 id="next-step">Next Step</h3>
|
||||
<h4 id="-faq-started-faq-html-">
|
||||
<a href="started-faq.html">FAQ</a>
|
||||
</h4>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,196 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Owl Carousel Documentation">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Welcome | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Getting Started</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="docs">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-3 large-3 columns">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Getting Started</li>
|
||||
<li> <a href="started-welcome.html">Welcome</a> </li>
|
||||
<li> <a href="started-installation.html">Installation</a> </li>
|
||||
<li> <a href="started-faq.html">FAQ</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">API</li>
|
||||
<li> <a href="api-options.html">Options</a> </li>
|
||||
<li> <a href="api-classes.html">Classes</a> </li>
|
||||
<li> <a href="api-events.html">Events</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Development</li>
|
||||
<li> <a href="dev-buildin-plugins.html">Built-in Plugins</a> </li>
|
||||
<li> <a href="dev-plugin-api.html">Plugin API</a> </li>
|
||||
<li> <a href="dev-styles.html">Sass Styles</a> </li>
|
||||
<li> <a href="dev-external.html">External Libs</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Support</li>
|
||||
<li> <a href="support-contributing.html">Contributing</a> </li>
|
||||
<li> <a href="support-changelog.html">Changelog</a> </li>
|
||||
<li> <a href="support-contact.html">Contact</a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small-12 medium-9 large-9 columns">
|
||||
<article class="docs-content">
|
||||
<h2 id="welcome">Welcome</h2>
|
||||
<blockquote>
|
||||
<p>No matter if you are a beginner or an advanced user, starting with Owl is easy.</p>
|
||||
</blockquote>
|
||||
<h3 id="new-features">New Features</h3>
|
||||
<ul>
|
||||
<li>Infinity Loop</li>
|
||||
<li>Center item</li>
|
||||
<li>Smart Speed</li>
|
||||
<li>Stage Padding</li>
|
||||
<li>Item Margin</li>
|
||||
<li>Ability to make almost all options responsive</li>
|
||||
<li>Various Widths</li>
|
||||
<li>Callback Events</li>
|
||||
<li>RTL</li>
|
||||
<li>YouTube/Vimeo/vzaar support (fetching thumbnails as well)</li>
|
||||
<li>Anchors navigation</li>
|
||||
<li>Merged Items</li>
|
||||
<li>and more...</li>
|
||||
</ul>
|
||||
<h3 id="compatibility">Compatibility</h3>
|
||||
<p>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.</p>
|
||||
<p>Owl Carousel has been tested in following browsers/devices:</p>
|
||||
<ul>
|
||||
<li>Chrome</li>
|
||||
<li>Firefox</li>
|
||||
<li>Opera</li>
|
||||
<li>IE7/8/10/11</li>
|
||||
<li>iPad Safari</li>
|
||||
<li>iPod4 Safari</li>
|
||||
<li>Nexus 7 Chrome</li>
|
||||
<li>Galaxy S4</li>
|
||||
<li>Nokia 8s Windows8</li>
|
||||
</ul>
|
||||
<h3 id="library">Library</h3>
|
||||
<p>Download a version that suits your needs:</p>
|
||||
<ul>
|
||||
<li> <a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Owl Carousel - 2.3.4</a> - Distributed version - compiled and minified. Javascript, images and CSS included. </li>
|
||||
<li> <a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/master.zip">Owl Carousel Source - 2.3.4</a> - Source files including this documentation. All wrapped in Grunt project. </li>
|
||||
</ul>
|
||||
<h3 id="files-included">Files included</h3>
|
||||
<p>Distributed version structure:</p>
|
||||
<pre><code>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</code></pre>
|
||||
<h3 id="dependecies">Dependecies</h3>
|
||||
<p>Get the latest
|
||||
<a href="https://jquery.com/">jQuery</a> or
|
||||
<a href="http://zeptojs.com/">Zepto</a> library. Minimum compatible jQuery version is 1.8.3 version.</p>
|
||||
<h3 id="next-step">Next Step</h3>
|
||||
<h4 id="-installation-started-installation-html-">
|
||||
<a href="started-installation.html">Installation</a>
|
||||
</h4>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Owl Carousel Documentation">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Changelog | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Support</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="docs">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-3 large-3 columns">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Getting Started</li>
|
||||
<li> <a href="started-welcome.html">Welcome</a> </li>
|
||||
<li> <a href="started-installation.html">Installation</a> </li>
|
||||
<li> <a href="started-faq.html">FAQ</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">API</li>
|
||||
<li> <a href="api-options.html">Options</a> </li>
|
||||
<li> <a href="api-classes.html">Classes</a> </li>
|
||||
<li> <a href="api-events.html">Events</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Development</li>
|
||||
<li> <a href="dev-buildin-plugins.html">Built-in Plugins</a> </li>
|
||||
<li> <a href="dev-plugin-api.html">Plugin API</a> </li>
|
||||
<li> <a href="dev-styles.html">Sass Styles</a> </li>
|
||||
<li> <a href="dev-external.html">External Libs</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Support</li>
|
||||
<li> <a href="support-contributing.html">Contributing</a> </li>
|
||||
<li> <a href="support-changelog.html">Changelog</a> </li>
|
||||
<li> <a href="support-contact.html">Contact</a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small-12 medium-9 large-9 columns">
|
||||
<article class="docs-content">
|
||||
<h2 id="changelog">Changelog</h2>
|
||||
<hr>
|
||||
<h5 id="2-0-0-beta-2-4">2.0.0.beta.2.4</h5>
|
||||
<ul>
|
||||
<li>Refactors Core</li>
|
||||
<li>Makes <code>slideBy</code> option independet of <code>nav</code></li>
|
||||
<li>Corrects update of <code>navRewind</code></li>
|
||||
<li>Corrects <code>change</code> event for position in carousel</li>
|
||||
<li>Replaces <code>indexOf</code> with <code>$.inArray</code> in navigaiton plugin</li>
|
||||
<li>Corrects <code>to</code> override in navigation plugin</li>
|
||||
<li>Adds core overrides for navigation plugin</li>
|
||||
<li>Corrects naming of plugins as object members</li>
|
||||
<li>Corrects <code>navText</code> option of navigation plugin</li>
|
||||
<li>Corrects <code>slideBy</code> option and adds events for navigation plugin</li>
|
||||
<li>Corrects adaptive behaviour of the navigation plugin</li>
|
||||
<li>fixed autoHeight plugin</li>
|
||||
<li>fixed animate plugin</li>
|
||||
<li>added autoHeight demo</li>
|
||||
<li>fixed download link in subpages</li>
|
||||
</ul>
|
||||
<h5 id="2-0-0-beta-2-3">2.0.0.beta.2.3</h5>
|
||||
<p>Thanks to Artus Kolanowski for this amazing update</p>
|
||||
<ul>
|
||||
<li>Separates navigation from core (nav,dots and hash)</li>
|
||||
<li>Corrests and completes JSDocs comments</li>
|
||||
<li>Replaces <code>bind</code> with <code>$.proxy</code></li>
|
||||
</ul>
|
||||
<h5 id="2-0-0-beta-2-2">2.0.0.beta.2.2</h5>
|
||||
<ul>
|
||||
<li>fixed some events trigger two times on initilize</li>
|
||||
<li>fixed lazyload bug</li>
|
||||
<li>fixed stage active class calculation when using stagePadding</li>
|
||||
<li>fixed translate callback</li>
|
||||
<li>fixed fixed update function and update/updated events</li>
|
||||
<li>included stagePadding demo</li>
|
||||
</ul>
|
||||
<hr>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Owl Carousel Documentation">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Contact | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Support</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="docs">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-3 large-3 columns">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Getting Started</li>
|
||||
<li> <a href="started-welcome.html">Welcome</a> </li>
|
||||
<li> <a href="started-installation.html">Installation</a> </li>
|
||||
<li> <a href="started-faq.html">FAQ</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">API</li>
|
||||
<li> <a href="api-options.html">Options</a> </li>
|
||||
<li> <a href="api-classes.html">Classes</a> </li>
|
||||
<li> <a href="api-events.html">Events</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Development</li>
|
||||
<li> <a href="dev-buildin-plugins.html">Built-in Plugins</a> </li>
|
||||
<li> <a href="dev-plugin-api.html">Plugin API</a> </li>
|
||||
<li> <a href="dev-styles.html">Sass Styles</a> </li>
|
||||
<li> <a href="dev-external.html">External Libs</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Support</li>
|
||||
<li> <a href="support-contributing.html">Contributing</a> </li>
|
||||
<li> <a href="support-changelog.html">Changelog</a> </li>
|
||||
<li> <a href="support-contact.html">Contact</a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small-12 medium-9 large-9 columns">
|
||||
<article class="docs-content">
|
||||
<h2 id="contact">Contact</h2>
|
||||
<hr>
|
||||
<p>If you are looking for help then the best place to ask a question is
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/issues">Github</a> . Also don't forget to add a
|
||||
<a href="https://jsfiddle.net/">jsfiddle</a> or a link to your demo/example website!</p>
|
||||
<h3 id="report-a-bug">Report a bug</h3>
|
||||
<p>Please use
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/issues">Github</a> to report bugs.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Owl Carousel Documentation">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Contributing | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="../assets/vendors/jquery.min.js"></script>
|
||||
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- title -->
|
||||
<section class="title">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h1>Support</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="docs">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-3 large-3 columns">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Getting Started</li>
|
||||
<li> <a href="started-welcome.html">Welcome</a> </li>
|
||||
<li> <a href="started-installation.html">Installation</a> </li>
|
||||
<li> <a href="started-faq.html">FAQ</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">API</li>
|
||||
<li> <a href="api-options.html">Options</a> </li>
|
||||
<li> <a href="api-classes.html">Classes</a> </li>
|
||||
<li> <a href="api-events.html">Events</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Development</li>
|
||||
<li> <a href="dev-buildin-plugins.html">Built-in Plugins</a> </li>
|
||||
<li> <a href="dev-plugin-api.html">Plugin API</a> </li>
|
||||
<li> <a href="dev-styles.html">Sass Styles</a> </li>
|
||||
<li> <a href="dev-external.html">External Libs</a> </li>
|
||||
</ul>
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav-head">Support</li>
|
||||
<li> <a href="support-contributing.html">Contributing</a> </li>
|
||||
<li> <a href="support-changelog.html">Changelog</a> </li>
|
||||
<li> <a href="support-contact.html">Contact</a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small-12 medium-9 large-9 columns">
|
||||
<article class="docs-content">
|
||||
<h2 id="contributing">Contributing</h2>
|
||||
<blockquote>
|
||||
<p>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!</p>
|
||||
</blockquote>
|
||||
<p>If you are looking to support Owl Carousel with your amazing ideas (or just fix some nasty bugs) then go to
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2">Github</a> and fork the project.</p>
|
||||
<h3 id="some-tips-for-contributors">Some tips for contributors</h3>
|
||||
<p>Owl Carousel is built around Grunt, Bower and Assemble frameworks. If you are not familiar with those tools please visit:</p>
|
||||
<ul>
|
||||
<li> <a href="https://nodejs.org/">Node.js</a> </li>
|
||||
<li> <a href="http://yeoman.io/">Yeoman</a> </li>
|
||||
<li> <a href="http://gruntjs.com/">Grunt</a> </li>
|
||||
<li> <a href="http://bower.io/">Bower</a> </li>
|
||||
<li> <a href="http://assemble.io/">Assemble</a> </li>
|
||||
</ul>
|
||||
<h3 id="installation-dependecies">Installation dependecies</h3>
|
||||
<p>Open Terminal, go to folder with project and type:</p>
|
||||
<pre><code>npm install</code></pre>
|
||||
<p>Then install bower components</p>
|
||||
<pre><code>bower install</code></pre>
|
||||
<h3 id="grunt-tasks">Grunt Tasks</h3>
|
||||
<p>The default task runs two other tasks: <code>dist</code> and <code>docs</code>. Type grunt to run default:</p>
|
||||
<pre><code>grunt</code></pre>
|
||||
<p>Now that the whole project is generated, run the last grunt task:</p>
|
||||
<pre><code>grunt serve</code></pre>
|
||||
<p>This creates localhost server and opens docs in your default browser. <code>watch</code> tasks will look for any changes and will automatically update the project and reload the browser.</p>
|
||||
<p>Now you are ready to make some cool updates by yourself. Owl project is in <code>src</code> folder. Also dont change <code>src/css/*.css</code> - all css files are generated from sass.</p>
|
||||
<blockquote>
|
||||
<p>Happy Coding</p>
|
||||
</blockquote>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="../assets/vendors/highlight.js"></script>
|
||||
<script src="../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- head -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.">
|
||||
<meta name="author" content="David Deutsch">
|
||||
<title>
|
||||
Home | Owl Carousel | 2.3.4
|
||||
</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="assets/css/docs.theme.min.css">
|
||||
|
||||
<!-- Owl Stylesheets -->
|
||||
<link rel="stylesheet" href="assets/owlcarousel/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="assets/owlcarousel/assets/owl.theme.default.min.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
||||
|
||||
<!-- javascript -->
|
||||
<script src="assets/vendors/jquery.min.js"></script>
|
||||
<script src="assets/owlcarousel/owl.carousel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<div class="brand left">
|
||||
<h3>
|
||||
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
||||
</h3>
|
||||
</div>
|
||||
<a id="toggle-nav" class="right">
|
||||
<span></span> <span></span> <span></span>
|
||||
</a>
|
||||
<div class="nav-bar">
|
||||
<ul class="clearfix">
|
||||
<li class="active">
|
||||
<a href="/OwlCarousel2/index.html">Home</a>
|
||||
</li>
|
||||
<li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
|
||||
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
||||
<li>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
||||
<span class="download"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- home panel -->
|
||||
<section id="hero">
|
||||
<div class="row">
|
||||
<div class="large-8 medium-8 columns">
|
||||
<h1>Owl Carousel 2</h1>
|
||||
<h4>Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.</h4>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip" class="hero-button">Download</a>
|
||||
<a href="https://github.com/OwlCarousel2/OwlCarousel2" class="hero-button outline">Github</a>
|
||||
<p>2.3.4</p>
|
||||
</div>
|
||||
<div class="large-4 medium-4 columns">
|
||||
<img class="owl-logo" src="assets/img/owl-logo.png" alt="mr. Owl">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- body -->
|
||||
<div class="home-demo">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h3>Demo</h3>
|
||||
<div class="owl-carousel">
|
||||
<div class="item">
|
||||
<h2>Swipe</h2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>Drag</h2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>Responsive</h2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>CSS3</h2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>Fast</h2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>Easy</h2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>Free</h2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>Upgradable</h2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>Tons of options</h2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>Infinity</h2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>Auto Width</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var owl = $('.owl-carousel');
|
||||
owl.owlCarousel({
|
||||
margin: 10,
|
||||
loop: true,
|
||||
responsive: {
|
||||
0: {
|
||||
items: 1
|
||||
},
|
||||
600: {
|
||||
items: 2
|
||||
},
|
||||
1000: {
|
||||
items: 3
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- features -->
|
||||
<div id="features">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-9 small-centered columns">
|
||||
<section class="row feature">
|
||||
<div class="medium-4 small-12 columns">
|
||||
<img src="assets/img/feature-options.png" alt="">
|
||||
</div>
|
||||
<div class="medium-8 small-12 columns">
|
||||
<h2>Fully Customisable</h2>
|
||||
<p>Over 60 options. Easy for novice users and even more powerful for advanced developers.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="row feature">
|
||||
<div class="medium-4 small-12 columns">
|
||||
<img src="assets/img/feature-drag.png" alt="">
|
||||
</div>
|
||||
<div class="medium-8 small-12 columns">
|
||||
<h2>Touch and Drag Support</h2>
|
||||
<p>Designed specially to boost mobile browsing experience. Mouse drag works great on desktop too!</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="row feature">
|
||||
<div class="medium-4 small-12 columns">
|
||||
<img src="assets/img/feature-responsive.png" alt="">
|
||||
</div>
|
||||
<div class="medium-8 small-12 columns">
|
||||
<h2>Fully Responsive</h2>
|
||||
<p>Almost all options are responsive and include very intuitive breakpoints settings.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="row feature">
|
||||
<div class="medium-4 small-12 columns">
|
||||
<img src="assets/img/feature-modern.png" alt="">
|
||||
</div>
|
||||
<div class="medium-8 small-12 columns">
|
||||
<h2>Modern Browsers</h2>
|
||||
<p>Owl uses hardware acceleration with CSS3 Translate3d transitions. Its fast and works like a charm! </p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="row feature">
|
||||
<div class="medium-4 small-12 columns">
|
||||
<img src="assets/img/feature-zombie.png" alt="">
|
||||
</div>
|
||||
<div class="medium-8 small-12 columns">
|
||||
<h2>Zombie Browsers</h2>
|
||||
<p>CSS2 fallback supported for older browser.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="row feature">
|
||||
<div class="medium-4 small-12 columns">
|
||||
<img src="assets/img/feature-module.png" alt="">
|
||||
</div>
|
||||
<div class="medium-8 small-12 columns">
|
||||
<h2>Modules and Plugins</h2>
|
||||
<p>Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won't use on your project or create new ones that fit your needs</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<section id="teaser-text">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-11 small-centered columns">
|
||||
<hr>
|
||||
<h3 id="owl-carousel-has-been-choosen-as-number-one-jquery-plugin-by-hundreds-of-developers-now-its-time-for-a-new-version-that-comes-with-lots-of-new-features-and-even-more-user-friendly-api-">Owl Carousel has been choosen as number one jQuery plugin by hundreds of developers. Now its time for a new version that comes with lots of new features and even more user friendly API.</h3>
|
||||
<p>Watch this space- we'll be launching soon :)</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h5>
|
||||
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
||||
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- vendors -->
|
||||
<script src="assets/vendors/highlight.js"></script>
|
||||
<script src="assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user