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