mirror of
https://github.com/cwinfo/powerdns-admin.git
synced 2025-06-15 04:26:05 +00:00
Initial commit
This commit is contained in:
Khanh Ngo
@ -0,0 +1,14 @@
|
||||
Options -Indexes
|
||||
|
||||
RewriteEngine on
|
||||
RewriteCond %{REQUEST_FILENAME} !-d
|
||||
RewriteCond %{REQUEST_FILENAME}\.html -f
|
||||
RewriteRule ^(.*)$ $1.html
|
||||
RewriteRule ^(.*)/$ http://%{HTTP_HOST}/$1
|
||||
|
||||
|
||||
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
|
||||
BrowserMatch ^Mozilla/4 gzip-only-text/html
|
||||
BrowserMatch ^Mozilla/4.0[678] no-gzip
|
||||
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@ -0,0 +1,335 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Auto Height</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.transitions.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Auto Height</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
<div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x400/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x200/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x250/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x350/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x100/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>Add height to <code>div="owl-wrapper-outer"</code> so you can use diffrent heights on each slide. Use it only for one item per page setting. Don't use it on large content websites.</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
autoPlay : 3000,
|
||||
stopOnHover : true,
|
||||
navigation:true,
|
||||
paginationSpeed : 1000,
|
||||
goToFirstSpeed : 2000,
|
||||
singleItem : true,
|
||||
autoHeight : true,
|
||||
transitionStyle:"fade"
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
<div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x400/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x200/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x250/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x350/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x100/42bdc2/FFFFFF"></div>
|
||||
<div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .owl-item div{
|
||||
padding:5px;
|
||||
}
|
||||
#owl-demo .owl-item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .owl-item div{
|
||||
padding:5px;
|
||||
}
|
||||
#owl-demo .owl-item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#owl-demo").owlCarousel({
|
||||
autoPlay : 3000,
|
||||
stopOnHover : true,
|
||||
navigation:true,
|
||||
paginationSpeed : 1000,
|
||||
goToFirstSpeed : 2000,
|
||||
singleItem : true,
|
||||
autoHeight : true,
|
||||
transitionStyle:"fade"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
365
app/static/global/plugins/carousel-owl-carousel/demos/click.html
Normal file
365
app/static/global/plugins/carousel-owl-carousel/demos/click.html
Normal file
@ -0,0 +1,365 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Click Event</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Click events inside content.</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
|
||||
<a class="item link"><h1>1</h1></a>
|
||||
<a class="item link"><h1>2</h1></a>
|
||||
<a class="item link"><h1>3</h1></a>
|
||||
<a class="item link"><h1>4</h1></a>
|
||||
<a class="item link"><h1>5</h1></a>
|
||||
<a class="item link"><h1>6</h1></a>
|
||||
<a class="item link"><h1>7</h1></a>
|
||||
<a class="item link"><h1>8</h1></a>
|
||||
<a class="item link"><h1>9</h1></a>
|
||||
<a class="item link"><h1>10</h1></a>
|
||||
<a class="item link"><h1>11</h1></a>
|
||||
<a class="item link"><h1>12</h1></a>
|
||||
<a class="item link"><h1>13</h1></a>
|
||||
<a class="item link"><h1>14</h1></a>
|
||||
<a class="item link"><h1>15</h1></a>
|
||||
<a class="item link"><h1>16</h1></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>Enabling click events inside content was the biggest challenge while building this plugin. Please don't use mouseup and mousedown events, they are reserved for mouse dragging events unless you have to use them. In this case you can disable mouse draggable capabilities by adding<code>mouseDraggable:false</code> in options.
|
||||
</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
items : 10
|
||||
});
|
||||
|
||||
$('.link').on('click', function(event){
|
||||
var $this = $(this);
|
||||
if($this.hasClass('clicked')){
|
||||
$this.removeAttr('style').removeClass('clicked');
|
||||
} else{
|
||||
$this.css('background','#7fc242').addClass('clicked');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
<a class="item link"><h1>1</h1></a>
|
||||
<a class="item link"><h1>2</h1></a>
|
||||
<a class="item link"><h1>3</h1></a>
|
||||
<a class="item link"><h1>4</h1></a>
|
||||
<a class="item link"><h1>5</h1></a>
|
||||
<a class="item link"><h1>6</h1></a>
|
||||
<a class="item link"><h1>7</h1></a>
|
||||
<a class="item link"><h1>8</h1></a>
|
||||
<a class="item link"><h1>9</h1></a>
|
||||
<a class="item link"><h1>10</h1></a>
|
||||
<a class="item link"><h1>11</h1></a>
|
||||
<a class="item link"><h1>12</h1></a>
|
||||
<a class="item link"><h1>13</h1></a>
|
||||
<a class="item link"><h1>14</h1></a>
|
||||
<a class="item link"><h1>15</h1></a>
|
||||
<a class="item link"><h1>16</h1></a>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item{
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background: #ffd800;
|
||||
padding: 30px 0px;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
#owl-demo .item:hover{
|
||||
background: #F2CD00;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="full.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Full Width</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item{
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background: #ffd800;
|
||||
padding: 30px 0px;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
#owl-demo .item:hover{
|
||||
background: #F2CD00;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
items : 10
|
||||
});
|
||||
|
||||
$('.link').on('click', function(event){
|
||||
var $this = $(this);
|
||||
if($this.hasClass('clicked')){
|
||||
$this.removeAttr('style').removeClass('clicked');
|
||||
} else{
|
||||
$this.css('background','#7fc242').addClass('clicked');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,417 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Custom</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Custom Options with Events</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
|
||||
<div class="item"><h1>1</h1></div>
|
||||
<div class="item"><h1>2</h1></div>
|
||||
<div class="item"><h1>3</h1></div>
|
||||
<div class="item"><h1>4</h1></div>
|
||||
<div class="item"><h1>5</h1></div>
|
||||
<div class="item"><h1>6</h1></div>
|
||||
<div class="item"><h1>7</h1></div>
|
||||
<div class="item"><h1>8</h1></div>
|
||||
<div class="item"><h1>9</h1></div>
|
||||
<div class="item"><h1>10</h1></div>
|
||||
<div class="item"><h1>11</h1></div>
|
||||
<div class="item"><h1>12</h1></div>
|
||||
<div class="item"><h1>13</h1></div>
|
||||
<div class="item"><h1>14</h1></div>
|
||||
<div class="item"><h1>15</h1></div>
|
||||
<div class="item"><h1>16</h1></div>
|
||||
|
||||
</div>
|
||||
<div class="customNavigation">
|
||||
<a class="btn prev">Previous</a>
|
||||
<a class="btn next">Next</a>
|
||||
<a class="btn play">Autoplay</a>
|
||||
<a class="btn stop">Stop</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>This is an example of using custom events for navigation. Also it shows how you can customise widths and inherit option from tablet to mobile.
|
||||
</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
var owl = $("#owl-demo");
|
||||
|
||||
owl.owlCarousel({
|
||||
items : 10, //10 items above 1000px browser width
|
||||
itemsDesktop : [1000,5], //5 items between 1000px and 901px
|
||||
itemsDesktopSmall : [900,3], // betweem 900px and 601px
|
||||
itemsTablet: [600,2], //2 items between 600 and 0
|
||||
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
|
||||
});
|
||||
|
||||
// Custom Navigation Events
|
||||
$(".next").click(function(){
|
||||
owl.trigger('owl.next');
|
||||
})
|
||||
$(".prev").click(function(){
|
||||
owl.trigger('owl.prev');
|
||||
})
|
||||
$(".play").click(function(){
|
||||
owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
|
||||
})
|
||||
$(".stop").click(function(){
|
||||
owl.trigger('owl.stop');
|
||||
})
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="owl-carousel owl-theme">
|
||||
<div class="item"><h1>1</h1></div>
|
||||
<div class="item"><h1>2</h1></div>
|
||||
<div class="item"><h1>3</h1></div>
|
||||
<div class="item"><h1>4</h1></div>
|
||||
<div class="item"><h1>5</h1></div>
|
||||
<div class="item"><h1>6</h1></div>
|
||||
<div class="item"><h1>7</h1></div>
|
||||
<div class="item"><h1>8</h1></div>
|
||||
<div class="item"><h1>9</h1></div>
|
||||
<div class="item"><h1>10</h1></div>
|
||||
<div class="item"><h1>11</h1></div>
|
||||
<div class="item"><h1>12</h1></div>
|
||||
<div class="item"><h1>13</h1></div>
|
||||
<div class="item"><h1>14</h1></div>
|
||||
<div class="item"><h1>15</h1></div>
|
||||
<div class="item"><h1>16</h1></div>
|
||||
</div>
|
||||
|
||||
<div class="customNavigation">
|
||||
<a class="btn prev">Previous</a>
|
||||
<a class="btn next">Next</a>
|
||||
<a class="btn play">Autoplay</a>
|
||||
<a class="btn stop">Stop</a>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item{
|
||||
background: #3fbf79;
|
||||
padding: 30px 0px;
|
||||
margin: 10px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
.customNavigation{
|
||||
text-align: center;
|
||||
}
|
||||
//use styles below to disable ugly selection
|
||||
.customNavigation a{
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item{
|
||||
background: #3fbf79;
|
||||
padding: 30px 0px;
|
||||
margin: 10px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
.customNavigation{
|
||||
text-align: center;
|
||||
}
|
||||
.customNavigation a{
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
var owl = $("#owl-demo");
|
||||
|
||||
owl.owlCarousel({
|
||||
|
||||
items : 10, //10 items above 1000px browser width
|
||||
itemsDesktop : [1000,5], //5 items between 1000px and 901px
|
||||
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
|
||||
itemsTablet: [600,2], //2 items between 600 and 0;
|
||||
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
|
||||
|
||||
});
|
||||
|
||||
// Custom Navigation Events
|
||||
$(".next").click(function(){
|
||||
owl.trigger('owl.next');
|
||||
})
|
||||
$(".prev").click(function(){
|
||||
owl.trigger('owl.prev');
|
||||
})
|
||||
$(".play").click(function(){
|
||||
owl.trigger('owl.play',1000);
|
||||
})
|
||||
$(".stop").click(function(){
|
||||
owl.trigger('owl.stop');
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,358 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Dynamic content via custom JSON</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Dynamic content via custom JSON</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>This example uses custom structure of JSON file <a href="json/customData.json">customData.json</a>.
|
||||
</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
<li><a href="#JSON">JSON</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
jsonPath : 'json/customData.json',
|
||||
jsonSuccess : customDataSuccess
|
||||
});
|
||||
|
||||
function customDataSuccess(data){
|
||||
var content = "";
|
||||
for(var i in data["items"]){
|
||||
|
||||
var img = data["items"][i].img;
|
||||
var alt = data["items"][i].alt;
|
||||
|
||||
content += "<img src=\"" +img+ "\" alt=\"" +alt+ "\">"
|
||||
}
|
||||
$("#owl-demo").html(content);
|
||||
}
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item{
|
||||
background: #a1def8;
|
||||
padding: 30px 0px;
|
||||
display: block;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<div class="tab-pane" id="JSON">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
{
|
||||
"items" : [
|
||||
{
|
||||
"img": "assets/owl1.jpg",
|
||||
"alt" : "Owl Image 1"
|
||||
},
|
||||
{
|
||||
"img": "assets/owl2.jpg",
|
||||
"alt" : "Owl Image 2"
|
||||
},
|
||||
{
|
||||
"img": "assets/owl3.jpg",
|
||||
"alt" : "Owl Image 1"
|
||||
},
|
||||
{
|
||||
"img": "assets/owl4.jpg",
|
||||
"alt" : "Owl Image 2"
|
||||
},
|
||||
{
|
||||
"img": "assets/owl5.jpg",
|
||||
"alt" : "Owl Image 1"
|
||||
},
|
||||
{
|
||||
"img": "assets/owl6.jpg",
|
||||
"alt" : "Owl Image 2"
|
||||
}
|
||||
]
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo img{
|
||||
display: block;
|
||||
width: 99%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
jsonPath : 'json/customData.json',
|
||||
jsonSuccess : customDataSuccess
|
||||
});
|
||||
|
||||
function customDataSuccess(data){
|
||||
var content = "";
|
||||
for(var i in data["items"]){
|
||||
|
||||
var img = data["items"][i].img;
|
||||
var alt = data["items"][i].alt;
|
||||
|
||||
content += "<img src=\"" +img+ "\" alt=\"" +alt+ "\">"
|
||||
}
|
||||
$("#owl-demo").html(content);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
321
app/static/global/plugins/carousel-owl-carousel/demos/full.html
Normal file
321
app/static/global/plugins/carousel-owl-carousel/demos/full.html
Normal file
@ -0,0 +1,321 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Full Width Demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Full Browser Width</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
|
||||
<div class="item"><h1>1</h1></div>
|
||||
<div class="item"><h1>2</h1></div>
|
||||
<div class="item"><h1>3</h1></div>
|
||||
<div class="item"><h1>4</h1></div>
|
||||
<div class="item"><h1>5</h1></div>
|
||||
<div class="item"><h1>6</h1></div>
|
||||
<div class="item"><h1>7</h1></div>
|
||||
<div class="item"><h1>8</h1></div>
|
||||
<div class="item"><h1>9</h1></div>
|
||||
<div class="item"><h1>10</h1></div>
|
||||
<div class="item"><h1>11</h1></div>
|
||||
<div class="item"><h1>12</h1></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>To get full width use owl-carousel outside your div wrappers.-</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
navigation : true
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="owl-carousel owl-theme">
|
||||
|
||||
<div class="item"><h1>1</h1></div>
|
||||
<div class="item"><h1>2</h1></div>
|
||||
<div class="item"><h1>3</h1></div>
|
||||
<div class="item"><h1>4</h1></div>
|
||||
<div class="item"><h1>5</h1></div>
|
||||
<div class="item"><h1>6</h1></div>
|
||||
<div class="item"><h1>7</h1></div>
|
||||
<div class="item"><h1>8</h1></div>
|
||||
<div class="item"><h1>9</h1></div>
|
||||
<div class="item"><h1>10</h1></div>
|
||||
<div class="item"><h1>11</h1></div>
|
||||
<div class="item"><h1>12</h1></div>
|
||||
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item{
|
||||
background: #42bdc2;
|
||||
padding: 30px 0px;
|
||||
margin: 10px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item{
|
||||
background: #42bdc2;
|
||||
padding: 30px 0px;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#owl-demo").owlCarousel({
|
||||
navigation : true
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,325 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Images Demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<!-- Prettify -->
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Content with Images</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>In order for the images to auto fit to slider containers use width 100% on <img>. Check CSS below</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
|
||||
autoPlay: 3000, //Set AutoPlay to 3 seconds
|
||||
|
||||
items : 4,
|
||||
itemsDesktop : [1199,3],
|
||||
itemsDesktopSmall : [979,3]
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo">
|
||||
|
||||
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
|
||||
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item{
|
||||
margin: 3px;
|
||||
}
|
||||
#owl-demo .item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item{
|
||||
margin: 3px;
|
||||
}
|
||||
#owl-demo .item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#owl-demo").owlCarousel({
|
||||
autoPlay: 3000,
|
||||
items : 4,
|
||||
itemsDesktop : [1199,3],
|
||||
itemsDesktopSmall : [979,3]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,372 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - itemsCustom</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Define custom and unlimited items.</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
|
||||
<div class="item"><h1>1</h1></div>
|
||||
<div class="item"><h1>2</h1></div>
|
||||
<div class="item"><h1>3</h1></div>
|
||||
<div class="item"><h1>4</h1></div>
|
||||
<div class="item"><h1>5</h1></div>
|
||||
<div class="item"><h1>6</h1></div>
|
||||
<div class="item"><h1>7</h1></div>
|
||||
<div class="item"><h1>8</h1></div>
|
||||
<div class="item"><h1>9</h1></div>
|
||||
<div class="item"><h1>10</h1></div>
|
||||
<div class="item"><h1>11</h1></div>
|
||||
<div class="item"><h1>12</h1></div>
|
||||
<div class="item"><h1>13</h1></div>
|
||||
<div class="item"><h1>14</h1></div>
|
||||
<div class="item"><h1>15</h1></div>
|
||||
<div class="item"><h1>16</h1></div>
|
||||
<div class="item"><h1>17</h1></div>
|
||||
<div class="item"><h1>18</h1></div>
|
||||
<div class="item"><h1>19</h1></div>
|
||||
<div class="item"><h1>20</h1></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>Define custom and unlimited items depending from the width. If this option is set, itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile etc. are disabled. For better preview, order the arrays by screen size, but it's not mandatory. Don't forget to include the lowest available screen size, otherwise it will take the default one for screens lower than lowest available. In the example there is dimension with 0 with which cover screens between 0 and 450px.
|
||||
</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
var owl = $("#owl-demo");
|
||||
|
||||
owl.owlCarousel({
|
||||
|
||||
itemsCustom : [
|
||||
[0, 2],
|
||||
[450, 4],
|
||||
[600, 7],
|
||||
[700, 9],
|
||||
[1000, 10],
|
||||
[1200, 12],
|
||||
[1400, 13],
|
||||
[1600, 15]
|
||||
],
|
||||
navigation : true
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="owl-carousel owl-theme">
|
||||
<div class="item"><h1>1</h1></div>
|
||||
<div class="item"><h1>2</h1></div>
|
||||
<div class="item"><h1>3</h1></div>
|
||||
<div class="item"><h1>4</h1></div>
|
||||
<div class="item"><h1>5</h1></div>
|
||||
<div class="item"><h1>6</h1></div>
|
||||
<div class="item"><h1>7</h1></div>
|
||||
<div class="item"><h1>8</h1></div>
|
||||
<div class="item"><h1>9</h1></div>
|
||||
<div class="item"><h1>10</h1></div>
|
||||
<div class="item"><h1>11</h1></div>
|
||||
<div class="item"><h1>12</h1></div>
|
||||
<div class="item"><h1>13</h1></div>
|
||||
<div class="item"><h1>14</h1></div>
|
||||
<div class="item"><h1>15</h1></div>
|
||||
<div class="item"><h1>16</h1></div>
|
||||
<div class="item"><h1>17</h1></div>
|
||||
<div class="item"><h1>18</h1></div>
|
||||
<div class="item"><h1>19</h1></div>
|
||||
<div class="item"><h1>20</h1></div>
|
||||
</div>
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item{
|
||||
background: #42bdc2;
|
||||
padding: 30px 0px;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item{
|
||||
background: #42bdc2;
|
||||
padding: 30px 0px;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
var owl = $("#owl-demo");
|
||||
|
||||
owl.owlCarousel({
|
||||
|
||||
// Define custom and unlimited items depending from the width
|
||||
// If this option is set, itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile etc. are disabled
|
||||
// For better preview, order the arrays by screen size, but it's not mandatory
|
||||
// Don't forget to include the lowest available screen size, otherwise it will take the default one for screens lower than lowest available.
|
||||
// In the example there is dimension with 0 with which cover screens between 0 and 450px
|
||||
|
||||
itemsCustom : [
|
||||
[0, 2],
|
||||
[450, 4],
|
||||
[600, 7],
|
||||
[700, 9],
|
||||
[1000, 10],
|
||||
[1200, 12],
|
||||
[1400, 13],
|
||||
[1600, 15]
|
||||
],
|
||||
navigation : true
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
336
app/static/global/plugins/carousel-owl-carousel/demos/json.html
Normal file
336
app/static/global/plugins/carousel-owl-carousel/demos/json.html
Normal file
@ -0,0 +1,336 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Dynamic content via JSON</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Dynamic content via JSON</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>With this setup, all content is coming from external file <a href="json/data.json">data.json.</a> To get this stuff working prepare JSON file with proper structure (see JSON below).</p>
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
{
|
||||
"owl" : [
|
||||
{"item" : "your html content..."},
|
||||
{"item" : "your html content..."},
|
||||
...
|
||||
]
|
||||
}
|
||||
</pre>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
<li><a href="#JSON">JSON</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
jsonPath : "json/data.json"
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="owl-carousel owl-theme">
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item{
|
||||
background: #a1def8;
|
||||
padding: 30px 0px;
|
||||
display: block;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<div class="tab-pane" id="JSON">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
{
|
||||
"owl" : [
|
||||
{"item" : "<span class='item'><h1>1</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>2</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>3</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>4</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>5</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>6</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>7</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>8</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>9</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>10</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>11</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>12</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>13</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>14</h1></span>"}
|
||||
]
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item{
|
||||
background: #a1def8;
|
||||
padding: 30px 0px;
|
||||
display: block;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
jsonPath : "json/data.json"
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,28 @@
|
||||
{
|
||||
"items" : [
|
||||
{
|
||||
"img": "assets/owl1.jpg",
|
||||
"alt" : "Owl Image 1"
|
||||
},
|
||||
{
|
||||
"img": "assets/owl2.jpg",
|
||||
"alt" : "Owl Image 2"
|
||||
},
|
||||
{
|
||||
"img": "assets/owl3.jpg",
|
||||
"alt" : "Owl Image 1"
|
||||
},
|
||||
{
|
||||
"img": "assets/owl4.jpg",
|
||||
"alt" : "Owl Image 2"
|
||||
},
|
||||
{
|
||||
"img": "assets/owl5.jpg",
|
||||
"alt" : "Owl Image 1"
|
||||
},
|
||||
{
|
||||
"img": "assets/owl6.jpg",
|
||||
"alt" : "Owl Image 2"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
{
|
||||
"owl" : [
|
||||
{"item" : "<span class='item'><h1>1</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>2</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>3</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>4</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>5</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>6</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>7</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>8</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>9</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>10</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>11</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>12</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>13</h1></span>"},
|
||||
{"item" : "<span class='item'><h1>14</h1></span>"}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,338 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Lazy Load</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<!-- Prettify -->
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Lazy Load</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl4.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl6.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl7.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl8.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl4.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl6.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl7.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl8.jpg" alt="Lazy Owl Image"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>Delays loading of images. Images outside of viewport wont be loaded before user scrolls to them. Great for mobile devices to speed up page loadings.
|
||||
</p>
|
||||
<p>
|
||||
Img need special class <code>class="lazyOwl"</code> and path to image in <code>data-src=""</code>:
|
||||
<blockquote><code><img class="lazyOwl" data-src="path-to-your-image"></code></blockquote>
|
||||
</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
items : 4,
|
||||
lazyLoad : true,
|
||||
navigation : true
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl4.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl6.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl7.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl8.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl4.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl6.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl7.jpg" alt="Lazy Owl Image"></div>
|
||||
<div class="item"><img class="lazyOwl" data-src="assets/owl8.jpg" alt="Lazy Owl Image"></div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item{
|
||||
margin: 3px;
|
||||
}
|
||||
#owl-demo .item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item{
|
||||
margin: 3px;
|
||||
}
|
||||
#owl-demo .item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
items : 4,
|
||||
lazyLoad : true,
|
||||
navigation : true
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,515 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Content Manipulations</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<!-- Prettify -->
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Content manipulations.</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="span10">
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
<div class="item dodgerBlue"><h1>Start</h1></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span2">
|
||||
|
||||
<div class="left">
|
||||
<a href="" class="btn add">Add Item</a>
|
||||
</div>
|
||||
|
||||
<div class="left">
|
||||
<a href="" class="btn remove">Remove Item</a>
|
||||
</div>
|
||||
|
||||
<div class="left">
|
||||
<a class="btn reinit" href="">Reinit + singlItem</a>
|
||||
</div>
|
||||
|
||||
<div class="left">
|
||||
<a class="btn destroy" href="">Destroy</a>
|
||||
</div>
|
||||
|
||||
<div class="left">
|
||||
<a class="btn rebuild" href="">Rebuild</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>See buttons on top right? Great! Now have a play with them and you get the idea. Thats all. If you have any questions let me know on <a href="https://github.com/OwlFonk/OwlCarousel">github</a> </p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
var owl = $("#owl-demo"),
|
||||
i = 0,
|
||||
textholder,
|
||||
booleanValue = false;
|
||||
|
||||
//init carousel
|
||||
owl.owlCarousel();
|
||||
|
||||
/*
|
||||
addItem() method add new slides on given position
|
||||
|
||||
Syntax:
|
||||
owldata.addItem(htmlString, targetPosition)
|
||||
|
||||
First parameter(mandatory) "htmlString" accept string like this:
|
||||
var newItem = "<div>new Item</div>"
|
||||
|
||||
Second parameter "targetPosition" is optional and accept number values.
|
||||
To add item at the end of carousel you could use -1 value. Last item is default value.
|
||||
*/
|
||||
|
||||
$('.add').on("click", function(e){
|
||||
e.preventDefault();
|
||||
i += 1;
|
||||
var content = "<div class=\"item dodgerBlue\"><h1>"+i+"</h1></div>";
|
||||
owl.data('owlCarousel').addItem(content);
|
||||
});
|
||||
|
||||
/*
|
||||
Next new owl method is .removeItem()
|
||||
|
||||
Syntax:
|
||||
owldata.removeItem(targetPosition)
|
||||
|
||||
Where parameter "targetPosition" is target item you will remove.
|
||||
targetPosition is optional. Default value is last item (-1);
|
||||
*/
|
||||
|
||||
$('.remove').on("click", function(e){
|
||||
e.preventDefault();
|
||||
i -= 1;
|
||||
if(i<=0)i=0;
|
||||
$("#owl-demo").data('owlCarousel').removeItem();
|
||||
});
|
||||
|
||||
/*
|
||||
destroy() method unwrap whole plugin and leave original pre carousel structure
|
||||
|
||||
Syntax:
|
||||
owldata.destroy();
|
||||
*/
|
||||
|
||||
$('.destroy').click(function(e){
|
||||
e.preventDefault()
|
||||
$("#owl-demo").data('owlCarousel').destroy();
|
||||
});
|
||||
|
||||
/*
|
||||
reinit() method reinitialize plugin
|
||||
|
||||
Syntax:
|
||||
owldata.reinit(newOptions)
|
||||
|
||||
Yes! you can reinit plugin with new options. Old options
|
||||
will be overwritten if exist or added if new.
|
||||
|
||||
You can easly add new content by ajax or change old options with reinit method.
|
||||
*/
|
||||
|
||||
$('.reinit').click(function(e){
|
||||
e.preventDefault()
|
||||
if(booleanValue === true){
|
||||
booleanValue = false;
|
||||
} else if(booleanValue === false){
|
||||
booleanValue = true;
|
||||
}
|
||||
|
||||
owl.data('owlCarousel').reinit({
|
||||
singleItem : booleanValue
|
||||
});
|
||||
})
|
||||
|
||||
/*
|
||||
Well, if you destroyed plugin why not resurect it?
|
||||
*/
|
||||
|
||||
$('.rebuild').click(function(e){
|
||||
e.preventDefault()
|
||||
owl.owlCarousel();
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
<div class="item dodgerBlue"><h1>Start</h1></div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item{
|
||||
display: block;
|
||||
padding: 54px 0px;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
.left{
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.left .btn {
|
||||
display: block;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item{
|
||||
display: block;
|
||||
padding: 54px 0px;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
.left{
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.left .btn {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
var owl = $("#owl-demo"),
|
||||
i = 0,
|
||||
textholder,
|
||||
booleanValue = false;
|
||||
|
||||
//init carousel
|
||||
owl.owlCarousel();
|
||||
|
||||
/*
|
||||
addItem() method add new slides on given position
|
||||
|
||||
Syntax:
|
||||
owldata.addItem(htmlString, targetPosition)
|
||||
|
||||
First parameter(mandatory) "htmlString" accept string like this:
|
||||
var newItem = "<div>new Item</div>"
|
||||
|
||||
Second parameter "targetPosition" is optional and accept number values.
|
||||
To add item at the end of carousel you could use -1 value. Last item is default value.
|
||||
*/
|
||||
|
||||
$('.add').on("click", function(e){
|
||||
e.preventDefault();
|
||||
i += 1;
|
||||
var content = "<div class=\"item dodgerBlue\"><h1>"+i+"</h1></div>";
|
||||
owl.data('owlCarousel').addItem(content);
|
||||
});
|
||||
|
||||
/*
|
||||
Next new owl method is .removeItem()
|
||||
|
||||
Syntax:
|
||||
owldata.removeItem(targetPosition)
|
||||
|
||||
Where parameter "targetPosition" is target item you will remove.
|
||||
targetPosition is optional. Default value is last item (-1);
|
||||
*/
|
||||
|
||||
$('.remove').on("click", function(e){
|
||||
e.preventDefault();
|
||||
i -= 1;
|
||||
if(i<=0)i=0;
|
||||
$("#owl-demo").data('owlCarousel').removeItem();
|
||||
});
|
||||
|
||||
/*
|
||||
destroy() method unwrap whole plugin and leave original pre carousel structure
|
||||
|
||||
Syntax:
|
||||
owldata.destroy();
|
||||
*/
|
||||
|
||||
$('.destroy').click(function(e){
|
||||
e.preventDefault()
|
||||
$("#owl-demo").data('owlCarousel').destroy();
|
||||
});
|
||||
|
||||
/*
|
||||
reinit() method reinitialize plugin
|
||||
|
||||
Syntax:
|
||||
owldata.reinit(newOptions)
|
||||
|
||||
Yes! you can reinit plugin with new options. Old options
|
||||
will be overwritten if exist or added if new.
|
||||
|
||||
You can easly add new content by ajax or change old options with reinit method.
|
||||
*/
|
||||
|
||||
$('.reinit').click(function(e){
|
||||
e.preventDefault()
|
||||
if(booleanValue === true){
|
||||
booleanValue = false;
|
||||
} else if(booleanValue === false){
|
||||
booleanValue = true;
|
||||
}
|
||||
|
||||
owl.data('owlCarousel').reinit({
|
||||
singleItem : booleanValue
|
||||
});
|
||||
})
|
||||
|
||||
/*
|
||||
Well, if you destroyed plugin why not resurect it?
|
||||
*/
|
||||
|
||||
$('.rebuild').click(function(e){
|
||||
e.preventDefault()
|
||||
owl.owlCarousel();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,395 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Navigation on top</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Navigation on top by custom events</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
|
||||
<div class="customNavigation">
|
||||
<a class="btn prev">Previous</a>
|
||||
<a class="btn next">Next</a>
|
||||
</div>
|
||||
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
|
||||
<div class="item"><h1>1</h1></div>
|
||||
<div class="item"><h1>2</h1></div>
|
||||
<div class="item"><h1>3</h1></div>
|
||||
<div class="item"><h1>4</h1></div>
|
||||
<div class="item"><h1>5</h1></div>
|
||||
<div class="item"><h1>6</h1></div>
|
||||
<div class="item"><h1>7</h1></div>
|
||||
<div class="item"><h1>8</h1></div>
|
||||
<div class="item"><h1>9</h1></div>
|
||||
<div class="item"><h1>10</h1></div>
|
||||
<div class="item"><h1>11</h1></div>
|
||||
<div class="item"><h1>12</h1></div>
|
||||
<div class="item"><h1>13</h1></div>
|
||||
<div class="item"><h1>14</h1></div>
|
||||
<div class="item"><h1>15</h1></div>
|
||||
<div class="item"><h1>16</h1></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>This is an example of using custom events for navigation.
|
||||
</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
var owl = $("#owl-demo");
|
||||
|
||||
owl.owlCarousel();
|
||||
|
||||
// Custom Navigation Events
|
||||
$(".next").click(function(){
|
||||
owl.trigger('owl.next');
|
||||
})
|
||||
$(".prev").click(function(){
|
||||
owl.trigger('owl.prev');
|
||||
})
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div class="customNavigation">
|
||||
<a class="btn prev">Previous</a>
|
||||
<a class="btn next">Next</a>
|
||||
</div>
|
||||
|
||||
<div id="owl-demo" class="owl-carousel owl-theme">
|
||||
<div class="item"><h1>1</h1></div>
|
||||
<div class="item"><h1>2</h1></div>
|
||||
<div class="item"><h1>3</h1></div>
|
||||
<div class="item"><h1>4</h1></div>
|
||||
<div class="item"><h1>5</h1></div>
|
||||
<div class="item"><h1>6</h1></div>
|
||||
<div class="item"><h1>7</h1></div>
|
||||
<div class="item"><h1>8</h1></div>
|
||||
<div class="item"><h1>9</h1></div>
|
||||
<div class="item"><h1>10</h1></div>
|
||||
<div class="item"><h1>11</h1></div>
|
||||
<div class="item"><h1>12</h1></div>
|
||||
<div class="item"><h1>13</h1></div>
|
||||
<div class="item"><h1>14</h1></div>
|
||||
<div class="item"><h1>15</h1></div>
|
||||
<div class="item"><h1>16</h1></div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item{
|
||||
background: #3fbf79;
|
||||
padding: 30px 0px;
|
||||
margin: 10px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
.customNavigation{
|
||||
text-align: center;
|
||||
}
|
||||
//use styles below to disable ugly selection
|
||||
.customNavigation a{
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item{
|
||||
background: #3fbf79;
|
||||
padding: 30px 0px;
|
||||
margin: 10px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
.customNavigation{
|
||||
text-align: center;
|
||||
}
|
||||
.customNavigation a{
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
var owl = $("#owl-demo");
|
||||
|
||||
owl.owlCarousel();
|
||||
|
||||
// Custom Navigation Events
|
||||
$(".next").click(function(){
|
||||
owl.trigger('owl.next');
|
||||
})
|
||||
$(".prev").click(function(){
|
||||
owl.trigger('owl.prev');
|
||||
})
|
||||
$(".play").click(function(){
|
||||
owl.trigger('owl.play',1000);
|
||||
})
|
||||
$(".stop").click(function(){
|
||||
owl.trigger('owl.stop');
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,325 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Images Demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<!-- Prettify -->
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Navigation on top by callback</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>Navigation moved on top by <code>afterInit</code> callback</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
navigation:true,
|
||||
afterInit : function(elem){
|
||||
var that = this
|
||||
that.owlControls.prependTo(elem)
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo">
|
||||
|
||||
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
|
||||
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item{
|
||||
margin: 3px;
|
||||
}
|
||||
#owl-demo .item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item{
|
||||
margin: 3px;
|
||||
}
|
||||
#owl-demo .item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#owl-demo").owlCarousel({
|
||||
navigation:true,
|
||||
afterInit : function(elem){
|
||||
var that = this
|
||||
that.owlControls.prependTo(elem)
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
318
app/static/global/plugins/carousel-owl-carousel/demos/one.html
Normal file
318
app/static/global/plugins/carousel-owl-carousel/demos/one.html
Normal file
@ -0,0 +1,318 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - One slide</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>One Item with Image</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
|
||||
<div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
|
||||
<div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
|
||||
<div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>In order for the images to auto fit to slider containers use width 100% on <img>. Check CSS below</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
|
||||
navigation : true, // Show next and prev buttons
|
||||
slideSpeed : 300,
|
||||
paginationSpeed : 400,
|
||||
singleItem:true
|
||||
|
||||
// "singleItem:true" is a shortcut for:
|
||||
// items : 1,
|
||||
// itemsDesktop : false,
|
||||
// itemsDesktopSmall : false,
|
||||
// itemsTablet: false,
|
||||
// itemsMobile : false
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="owl-carousel owl-theme">
|
||||
|
||||
<div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
|
||||
<div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
|
||||
<div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
|
||||
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#owl-demo").owlCarousel({
|
||||
|
||||
navigation : true,
|
||||
slideSpeed : 300,
|
||||
paginationSpeed : 400,
|
||||
singleItem : true
|
||||
|
||||
// "singleItem:true" is a shortcut for:
|
||||
// items : 1,
|
||||
// itemsDesktop : false,
|
||||
// itemsDesktopSmall : false,
|
||||
// itemsTablet: false,
|
||||
// itemsMobile : false
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,461 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Owl Status</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Owl Status Information</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
|
||||
<div class="item"><h1>0</h1></div>
|
||||
<div class="item"><h1>1</h1></div>
|
||||
<div class="item"><h1>2</h1></div>
|
||||
<div class="item"><h1>3</h1></div>
|
||||
<div class="item"><h1>4</h1></div>
|
||||
<div class="item"><h1>5</h1></div>
|
||||
<div class="item"><h1>6</h1></div>
|
||||
<div class="item"><h1>7</h1></div>
|
||||
<div class="item"><h1>8</h1></div>
|
||||
<div class="item"><h1>9</h1></div>
|
||||
<div class="item"><h1>10</h1></div>
|
||||
<div class="item"><h1>11</h1></div>
|
||||
<div class="item"><h1>12</h1></div>
|
||||
<div class="item"><h1>13</h1></div>
|
||||
<div class="item"><h1>14</h1></div>
|
||||
<div class="item"><h1>15</h1></div>
|
||||
|
||||
</div>
|
||||
<table id="owlStatus" class="table" style="width:auto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr class="owlItems">
|
||||
<td>owlItems.length</td>
|
||||
<td class="result"></td>
|
||||
</tr>
|
||||
|
||||
<tr class="currentItem">
|
||||
<td>currentItem</td>
|
||||
<td class="result"></td>
|
||||
</tr>
|
||||
|
||||
<tr class="prevItem">
|
||||
<td>prevItem</td>
|
||||
<td class="result"></td>
|
||||
</tr>
|
||||
|
||||
<tr class="visibleItems">
|
||||
<td>visibleItems</td>
|
||||
<td class="result"></td>
|
||||
</tr>
|
||||
|
||||
<tr class="dragDirection">
|
||||
<td>dragDirection:</td>
|
||||
<td class="result"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>This is an example of retrieving <code>this.owl object</code> with basic information.
|
||||
</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
var owl = $("#owl-demo"),
|
||||
status = $("#owlStatus");
|
||||
|
||||
owl.owlCarousel({
|
||||
navigation : true,
|
||||
afterAction : afterAction
|
||||
});
|
||||
|
||||
function updateResult(pos,value){
|
||||
status.find(pos).find(".result").text(value);
|
||||
}
|
||||
|
||||
function afterAction(){
|
||||
updateResult(".owlItems", this.owl.owlItems.length);
|
||||
updateResult(".currentItem", this.owl.currentItem);
|
||||
updateResult(".prevItem", this.prevItem);
|
||||
updateResult(".visibleItems", this.owl.visibleItems);
|
||||
updateResult(".dragDirection", this.owl.dragDirection);
|
||||
}
|
||||
|
||||
/*
|
||||
All owl object information listed below:
|
||||
|
||||
base.owl = {
|
||||
"userOptions" : base.userOptions,
|
||||
"baseElement" : base.$elem,
|
||||
"userItems" : base.$userItems,
|
||||
"owlItems" : base.$owlItems,
|
||||
"currentItem" : base.currentItem,
|
||||
"prevItem" : base.prevItem,
|
||||
"visibleItems": base.visibleItems,
|
||||
"isTouch" : base.browser.isTouch,
|
||||
"browser" : base.browser,
|
||||
"dragDirection": base.dragDirection
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
<div class="item"><h1>0</h1></div>
|
||||
<div class="item"><h1>1</h1></div>
|
||||
<div class="item"><h1>2</h1></div>
|
||||
<div class="item"><h1>3</h1></div>
|
||||
<div class="item"><h1>4</h1></div>
|
||||
<div class="item"><h1>5</h1></div>
|
||||
<div class="item"><h1>6</h1></div>
|
||||
<div class="item"><h1>7</h1></div>
|
||||
<div class="item"><h1>8</h1></div>
|
||||
<div class="item"><h1>9</h1></div>
|
||||
<div class="item"><h1>10</h1></div>
|
||||
<div class="item"><h1>11</h1></div>
|
||||
<div class="item"><h1>12</h1></div>
|
||||
<div class="item"><h1>13</h1></div>
|
||||
<div class="item"><h1>14</h1></div>
|
||||
<div class="item"><h1>15</h1></div>
|
||||
</div>
|
||||
<table id="owlStatus" class="table" style="width:auto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr class="owlItems">
|
||||
<td>owlItems.length</td>
|
||||
<td class="result"></td>
|
||||
</tr>
|
||||
|
||||
<tr class="currentItem">
|
||||
<td>currentItem</td>
|
||||
<td class="result"></td>
|
||||
</tr>
|
||||
|
||||
<tr class="prevItem">
|
||||
<td>prevItem</td>
|
||||
<td class="result"></td>
|
||||
</tr>
|
||||
|
||||
<tr class="visibleItems">
|
||||
<td>visibleItems</td>
|
||||
<td class="result"></td>
|
||||
</tr>
|
||||
|
||||
<tr class="dragDirection">
|
||||
<td>dragDirection:</td>
|
||||
<td class="result"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item{
|
||||
background: #3fbf79;
|
||||
padding: 30px 0px;
|
||||
margin: 10px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item{
|
||||
background: #3fbf79;
|
||||
padding: 30px 0px;
|
||||
margin: 10px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
var owl = $("#owl-demo"),
|
||||
status = $("#owlStatus");
|
||||
|
||||
owl.owlCarousel({
|
||||
navigation : true,
|
||||
afterAction : afterAction
|
||||
});
|
||||
|
||||
function updateResult(pos,value){
|
||||
status.find(pos).find(".result").text(value);
|
||||
}
|
||||
|
||||
function afterAction(){
|
||||
updateResult(".owlItems", this.owl.owlItems.length);
|
||||
updateResult(".currentItem", this.owl.currentItem);
|
||||
updateResult(".prevItem", this.prevItem);
|
||||
updateResult(".visibleItems", this.owl.visibleItems);
|
||||
updateResult(".dragDirection", this.owl.dragDirection);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,471 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Progress Bar</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Progress Bar</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
|
||||
<div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
|
||||
<div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
|
||||
<div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>Progress Bar made by three callbacks: <code>afterInit</code>, <code>afterMove</code> and <code>startDragging</code>.</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
var time = 7; // time in seconds
|
||||
|
||||
var $progressBar,
|
||||
$bar,
|
||||
$elem,
|
||||
isPause,
|
||||
tick,
|
||||
percentTime;
|
||||
|
||||
//Init the carousel
|
||||
$("#owl-demo").owlCarousel({
|
||||
slideSpeed : 500,
|
||||
paginationSpeed : 500,
|
||||
singleItem : true,
|
||||
afterInit : progressBar,
|
||||
afterMove : moved,
|
||||
startDragging : pauseOnDragging
|
||||
});
|
||||
|
||||
//Init progressBar where elem is $("#owl-demo")
|
||||
function progressBar(elem){
|
||||
$elem = elem;
|
||||
//build progress bar elements
|
||||
buildProgressBar();
|
||||
//start counting
|
||||
start();
|
||||
}
|
||||
|
||||
//create div#progressBar and div#bar then prepend to $("#owl-demo")
|
||||
function buildProgressBar(){
|
||||
$progressBar = $("<div>",{
|
||||
id:"progressBar"
|
||||
});
|
||||
$bar = $("<div>",{
|
||||
id:"bar"
|
||||
});
|
||||
$progressBar.append($bar).prependTo($elem);
|
||||
}
|
||||
|
||||
function start() {
|
||||
//reset timer
|
||||
percentTime = 0;
|
||||
isPause = false;
|
||||
//run interval every 0.01 second
|
||||
tick = setInterval(interval, 10);
|
||||
};
|
||||
|
||||
function interval() {
|
||||
if(isPause === false){
|
||||
percentTime += 1 / time;
|
||||
$bar.css({
|
||||
width: percentTime+"%"
|
||||
});
|
||||
//if percentTime is equal or greater than 100
|
||||
if(percentTime >= 100){
|
||||
//slide to next item
|
||||
$elem.trigger('owl.next')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//pause while dragging
|
||||
function pauseOnDragging(){
|
||||
isPause = true;
|
||||
}
|
||||
|
||||
//moved callback
|
||||
function moved(){
|
||||
//clear interval
|
||||
clearTimeout(tick);
|
||||
//start again
|
||||
start();
|
||||
}
|
||||
|
||||
//uncomment this to make pause on mouseover
|
||||
// $elem.on('mouseover',function(){
|
||||
// isPause = true;
|
||||
// })
|
||||
// $elem.on('mouseout',function(){
|
||||
// isPause = false;
|
||||
// })
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="owl-carousel owl-theme">
|
||||
|
||||
<div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
|
||||
<div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
|
||||
<div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
|
||||
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
#bar{
|
||||
width: 0%;
|
||||
max-width: 100%;
|
||||
height: 4px;
|
||||
background: #7fc242;
|
||||
}
|
||||
#progressBar{
|
||||
width: 100%;
|
||||
background: #EDEDED;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
#bar{
|
||||
width: 0%;
|
||||
max-width: 100%;
|
||||
height: 4px;
|
||||
background: #7fc242;
|
||||
}
|
||||
#progressBar{
|
||||
width: 100%;
|
||||
background: #EDEDED;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
var time = 7; // time in seconds
|
||||
|
||||
var $progressBar,
|
||||
$bar,
|
||||
$elem,
|
||||
isPause,
|
||||
tick,
|
||||
percentTime;
|
||||
|
||||
//Init the carousel
|
||||
$("#owl-demo").owlCarousel({
|
||||
slideSpeed : 500,
|
||||
paginationSpeed : 500,
|
||||
singleItem : true,
|
||||
afterInit : progressBar,
|
||||
afterMove : moved,
|
||||
startDragging : pauseOnDragging
|
||||
});
|
||||
|
||||
//Init progressBar where elem is $("#owl-demo")
|
||||
function progressBar(elem){
|
||||
$elem = elem;
|
||||
//build progress bar elements
|
||||
buildProgressBar();
|
||||
//start counting
|
||||
start();
|
||||
}
|
||||
|
||||
//create div#progressBar and div#bar then prepend to $("#owl-demo")
|
||||
function buildProgressBar(){
|
||||
$progressBar = $("<div>",{
|
||||
id:"progressBar"
|
||||
});
|
||||
$bar = $("<div>",{
|
||||
id:"bar"
|
||||
});
|
||||
$progressBar.append($bar).prependTo($elem);
|
||||
}
|
||||
|
||||
function start() {
|
||||
//reset timer
|
||||
percentTime = 0;
|
||||
isPause = false;
|
||||
//run interval every 0.01 second
|
||||
tick = setInterval(interval, 10);
|
||||
};
|
||||
|
||||
function interval() {
|
||||
if(isPause === false){
|
||||
percentTime += 1 / time;
|
||||
$bar.css({
|
||||
width: percentTime+"%"
|
||||
});
|
||||
//if percentTime is equal or greater than 100
|
||||
if(percentTime >= 100){
|
||||
//slide to next item
|
||||
$elem.trigger('owl.next')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//pause while dragging
|
||||
function pauseOnDragging(){
|
||||
isPause = true;
|
||||
}
|
||||
|
||||
//moved callback
|
||||
function moved(){
|
||||
//clear interval
|
||||
clearTimeout(tick);
|
||||
//start again
|
||||
start();
|
||||
}
|
||||
|
||||
//uncomment this to make pause on mouseover
|
||||
// $elem.on('mouseover',function(){
|
||||
// isPause = true;
|
||||
// })
|
||||
// $elem.on('mouseout',function(){
|
||||
// isPause = false;
|
||||
// })
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,416 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Ramdom order and custom navi.</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Random order and custom navi.</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
|
||||
<div class="item orange"><h1>1</h1></div>
|
||||
<div class="item darkCyan"><h1>2</h1></div>
|
||||
<div class="item yellow"><h1>3</h1></div>
|
||||
<div class="item forestGreen"><h1>4</h1></div>
|
||||
<div class="item dodgerBlue"><h1>5</h1></div>
|
||||
<div class="item skyBlue"><h1>6</h1></div>
|
||||
<div class="item zombieGreen"><h1>7</h1></div>
|
||||
<div class="item violet"><h1>8</h1></div>
|
||||
<div class="item steelGray"><h1>9</h1></div>
|
||||
<div class="item dodgerBlue"><h1>10</h1></div>
|
||||
<div class="item darkCyan"><h1>11</h1></div>
|
||||
<div class="item zombieGreen"><h1>12</h1></div>
|
||||
<div class="item orange"><h1>13</h1></div>
|
||||
<div class="item forestGreen"><h1>14</h1></div>
|
||||
<div class="item skyBlue"><h1>15</h1></div>
|
||||
<div class="item darkCyan"><h1>16</h1></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>A little play with <code>beforeInit</code> function. Refresh browser to see effect. Also check css to get idea how move navi buttons.
|
||||
</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
//Sort random function
|
||||
function random(owlSelector){
|
||||
owlSelector.children().sort(function(){
|
||||
return Math.round(Math.random()) - 0.5;
|
||||
}).each(function(){
|
||||
$(this).appendTo(owlSelector);
|
||||
});
|
||||
}
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
navigation: true,
|
||||
navigationText: [
|
||||
"<i class='icon-chevron-left icon-white'></i>",
|
||||
"<i class='icon-chevron-right icon-white'></i>"
|
||||
],
|
||||
beforeInit : function(elem){
|
||||
//Parameter elem pointing to $("#owl-demo")
|
||||
random(elem);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="owl-carousel owl-theme">
|
||||
<div class="item orange"><h1>1</h1></div>
|
||||
<div class="item darkCyan"><h1>2</h1></div>
|
||||
<div class="item yellow"><h1>3</h1></div>
|
||||
<div class="item forestGreen"><h1>4</h1></div>
|
||||
<div class="item dodgerBlue"><h1>5</h1></div>
|
||||
<div class="item skyBlue"><h1>6</h1></div>
|
||||
<div class="item zombieGreen"><h1>7</h1></div>
|
||||
<div class="item violet"><h1>8</h1></div>
|
||||
<div class="item steelGray"><h1>9</h1></div>
|
||||
<div class="item dodgerBlue"><h1>10</h1></div>
|
||||
<div class="item darkCyan"><h1>11</h1></div>
|
||||
<div class="item zombieGreen"><h1>12</h1></div>
|
||||
<div class="item orange"><h1>13</h1></div>
|
||||
<div class="item forestGreen"><h1>14</h1></div>
|
||||
<div class="item skyBlue"><h1>15</h1></div>
|
||||
<div class="item darkCyan"><h1>16</h1></div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item{
|
||||
display: block;
|
||||
padding: 30px 0px;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
.owl-theme .owl-controls .owl-buttons div {
|
||||
padding: 5px 9px;
|
||||
}
|
||||
|
||||
.owl-theme .owl-buttons i{
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
//To move navigation buttons outside use these settings:
|
||||
|
||||
.owl-theme .owl-controls .owl-buttons div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.owl-theme .owl-controls .owl-buttons .owl-prev{
|
||||
left: -45px;
|
||||
top: 55px;
|
||||
}
|
||||
|
||||
.owl-theme .owl-controls .owl-buttons .owl-next{
|
||||
right: -45px;
|
||||
top: 55px;
|
||||
}
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item{
|
||||
display: block;
|
||||
padding: 30px 0px;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
.owl-theme .owl-controls .owl-buttons div {
|
||||
padding: 5px 9px;
|
||||
}
|
||||
|
||||
.owl-theme .owl-buttons i{
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/*To move navigation buttons outside use these settings:*/
|
||||
|
||||
.owl-theme .owl-controls .owl-buttons div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.owl-theme .owl-controls .owl-buttons .owl-prev{
|
||||
left: -45px;
|
||||
top: 55px;
|
||||
}
|
||||
|
||||
.owl-theme .owl-controls .owl-buttons .owl-next{
|
||||
right: -45px;
|
||||
top: 55px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
//Sort random function
|
||||
function random(owlSelector){
|
||||
owlSelector.children().sort(function(){
|
||||
return Math.round(Math.random()) - 0.5;
|
||||
}).each(function(){
|
||||
$(this).appendTo(owlSelector);
|
||||
});
|
||||
}
|
||||
|
||||
$("#owl-demo").owlCarousel({
|
||||
navigation: true,
|
||||
navigationText: [
|
||||
"<i class='icon-chevron-left icon-white'></i>",
|
||||
"<i class='icon-chevron-right icon-white'></i>"
|
||||
],
|
||||
//Call beforeInit callback, elem parameter point to $("#owl-demo")
|
||||
beforeInit : function(elem){
|
||||
random(elem);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,328 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Items scale up</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<!-- Prettify -->
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Auto Scale up Items</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
|
||||
<div id="owl-demo" class="itemsScaleUp-true owl-carousel">
|
||||
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
|
||||
</div>
|
||||
|
||||
<div id="owl-demo" class="itemsScaleUp-false owl-carousel">
|
||||
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>If you have less items in a viewport than declared and you don't want to auto-stretch items use <code>itemsScaleUp:true</code>.</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
$(".itemsScaleUp-true").owlCarousel({
|
||||
items : 7,
|
||||
itemsScaleUp:true
|
||||
});
|
||||
|
||||
$(".itemsScaleUp-false").owlCarousel({
|
||||
items : 7
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="itemsScaleUp-true owl-carousel">
|
||||
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
|
||||
</div>
|
||||
|
||||
<div id="owl-demo" class="itemsScaleUp-false owl-carousel">
|
||||
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
|
||||
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item{
|
||||
margin: 3px;
|
||||
}
|
||||
#owl-demo .item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item{
|
||||
margin: 3px;
|
||||
}
|
||||
#owl-demo .item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$(".itemsScaleUp-false").owlCarousel({
|
||||
items : 7
|
||||
});
|
||||
|
||||
$(".itemsScaleUp-true").owlCarousel({
|
||||
items : 7,
|
||||
itemsScaleUp:true
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
569
app/static/global/plugins/carousel-owl-carousel/demos/sync.html
Normal file
569
app/static/global/plugins/carousel-owl-carousel/demos/sync.html
Normal file
@ -0,0 +1,569 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - Synced Owls</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Synced Owls</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
|
||||
<div id="sync1" class="owl-carousel">
|
||||
<div class="item"><h1>1</h1></div>
|
||||
<div class="item"><h1>2</h1></div>
|
||||
<div class="item"><h1>3</h1></div>
|
||||
<div class="item"><h1>4</h1></div>
|
||||
<div class="item"><h1>5</h1></div>
|
||||
<div class="item"><h1>6</h1></div>
|
||||
<div class="item"><h1>7</h1></div>
|
||||
<div class="item"><h1>8</h1></div>
|
||||
<div class="item"><h1>9</h1></div>
|
||||
<div class="item"><h1>10</h1></div>
|
||||
<div class="item"><h1>11</h1></div>
|
||||
<div class="item"><h1>12</h1></div>
|
||||
<div class="item"><h1>13</h1></div>
|
||||
<div class="item"><h1>14</h1></div>
|
||||
<div class="item"><h1>15</h1></div>
|
||||
<div class="item"><h1>16</h1></div>
|
||||
<div class="item"><h1>17</h1></div>
|
||||
<div class="item"><h1>18</h1></div>
|
||||
<div class="item"><h1>19</h1></div>
|
||||
<div class="item"><h1>20</h1></div>
|
||||
<div class="item"><h1>21</h1></div>
|
||||
<div class="item"><h1>22</h1></div>
|
||||
<div class="item"><h1>23</h1></div>
|
||||
</div>
|
||||
|
||||
<div id="sync2" class="owl-carousel">
|
||||
<div class="item" ><h1>1</h1></div>
|
||||
<div class="item" ><h1>2</h1></div>
|
||||
<div class="item" ><h1>3</h1></div>
|
||||
<div class="item" ><h1>4</h1></div>
|
||||
<div class="item" ><h1>5</h1></div>
|
||||
<div class="item" ><h1>6</h1></div>
|
||||
<div class="item" ><h1>7</h1></div>
|
||||
<div class="item" ><h1>8</h1></div>
|
||||
<div class="item" ><h1>9</h1></div>
|
||||
<div class="item"><h1>10</h1></div>
|
||||
<div class="item"><h1>11</h1></div>
|
||||
<div class="item"><h1>12</h1></div>
|
||||
<div class="item"><h1>13</h1></div>
|
||||
<div class="item"><h1>14</h1></div>
|
||||
<div class="item"><h1>15</h1></div>
|
||||
<div class="item"><h1>16</h1></div>
|
||||
<div class="item"><h1>17</h1></div>
|
||||
<div class="item"><h1>18</h1></div>
|
||||
<div class="item"><h1>19</h1></div>
|
||||
<div class="item"><h1>20</h1></div>
|
||||
<div class="item"><h1>21</h1></div>
|
||||
<div class="item"><h1>22</h1></div>
|
||||
<div class="item"><h1>23</h1></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>This is an example of using two synced Owl Carousel. This is not out of the box function, rather a demo or even "how to".
|
||||
</p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
var sync1 = $("#sync1");
|
||||
var sync2 = $("#sync2");
|
||||
|
||||
sync1.owlCarousel({
|
||||
singleItem : true,
|
||||
slideSpeed : 1000,
|
||||
navigation: true,
|
||||
pagination:false,
|
||||
afterAction : syncPosition,
|
||||
responsiveRefreshRate : 200,
|
||||
});
|
||||
|
||||
sync2.owlCarousel({
|
||||
items : 15,
|
||||
itemsDesktop : [1199,10],
|
||||
itemsDesktopSmall : [979,10],
|
||||
itemsTablet : [768,8],
|
||||
itemsMobile : [479,4],
|
||||
pagination:false,
|
||||
responsiveRefreshRate : 100,
|
||||
afterInit : function(el){
|
||||
el.find(".owl-item").eq(0).addClass("synced");
|
||||
}
|
||||
});
|
||||
|
||||
function syncPosition(el){
|
||||
var current = this.currentItem;
|
||||
$("#sync2")
|
||||
.find(".owl-item")
|
||||
.removeClass("synced")
|
||||
.eq(current)
|
||||
.addClass("synced")
|
||||
if($("#sync2").data("owlCarousel") !== undefined){
|
||||
center(current)
|
||||
}
|
||||
}
|
||||
|
||||
$("#sync2").on("click", ".owl-item", function(e){
|
||||
e.preventDefault();
|
||||
var number = $(this).data("owlItem");
|
||||
sync1.trigger("owl.goTo",number);
|
||||
});
|
||||
|
||||
function center(number){
|
||||
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
|
||||
var num = number;
|
||||
var found = false;
|
||||
for(var i in sync2visible){
|
||||
if(num === sync2visible[i]){
|
||||
var found = true;
|
||||
}
|
||||
}
|
||||
|
||||
if(found===false){
|
||||
if(num>sync2visible[sync2visible.length-1]){
|
||||
sync2.trigger("owl.goTo", num - sync2visible.length+2)
|
||||
}else{
|
||||
if(num - 1 === -1){
|
||||
num = 0;
|
||||
}
|
||||
sync2.trigger("owl.goTo", num);
|
||||
}
|
||||
} else if(num === sync2visible[sync2visible.length-1]){
|
||||
sync2.trigger("owl.goTo", sync2visible[1])
|
||||
} else if(num === sync2visible[0]){
|
||||
sync2.trigger("owl.goTo", num-1)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="sync1" class="owl-carousel">
|
||||
<div class="item"><h1>1</h1></div>
|
||||
<div class="item"><h1>2</h1></div>
|
||||
<div class="item"><h1>3</h1></div>
|
||||
<div class="item"><h1>4</h1></div>
|
||||
<div class="item"><h1>5</h1></div>
|
||||
<div class="item"><h1>6</h1></div>
|
||||
<div class="item"><h1>7</h1></div>
|
||||
<div class="item"><h1>8</h1></div>
|
||||
<div class="item"><h1>9</h1></div>
|
||||
<div class="item"><h1>10</h1></div>
|
||||
<div class="item"><h1>11</h1></div>
|
||||
<div class="item"><h1>12</h1></div>
|
||||
<div class="item"><h1>13</h1></div>
|
||||
<div class="item"><h1>14</h1></div>
|
||||
<div class="item"><h1>15</h1></div>
|
||||
<div class="item"><h1>16</h1></div>
|
||||
<div class="item"><h1>17</h1></div>
|
||||
<div class="item"><h1>18</h1></div>
|
||||
<div class="item"><h1>19</h1></div>
|
||||
<div class="item"><h1>20</h1></div>
|
||||
<div class="item"><h1>21</h1></div>
|
||||
<div class="item"><h1>22</h1></div>
|
||||
<div class="item"><h1>23</h1></div>
|
||||
</div>
|
||||
<div id="sync2" class="owl-carousel">
|
||||
<div class="item"><h1>1</h1></div>
|
||||
<div class="item"><h1>2</h1></div>
|
||||
<div class="item"><h1>3</h1></div>
|
||||
<div class="item"><h1>4</h1></div>
|
||||
<div class="item"><h1>5</h1></div>
|
||||
<div class="item"><h1>6</h1></div>
|
||||
<div class="item"><h1>7</h1></div>
|
||||
<div class="item"><h1>8</h1></div>
|
||||
<div class="item"><h1>9</h1></div>
|
||||
<div class="item"><h1>10</h1></div>
|
||||
<div class="item"><h1>11</h1></div>
|
||||
<div class="item"><h1>12</h1></div>
|
||||
<div class="item"><h1>13</h1></div>
|
||||
<div class="item"><h1>14</h1></div>
|
||||
<div class="item"><h1>15</h1></div>
|
||||
<div class="item"><h1>16</h1></div>
|
||||
<div class="item"><h1>17</h1></div>
|
||||
<div class="item"><h1>18</h1></div>
|
||||
<div class="item"><h1>19</h1></div>
|
||||
<div class="item"><h1>20</h1></div>
|
||||
<div class="item"><h1>21</h1></div>
|
||||
<div class="item"><h1>22</h1></div>
|
||||
<div class="item"><h1>23</h1></div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#sync1 .item{
|
||||
background: #0c83e7;
|
||||
padding: 80px 0px;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
#sync2 .item{
|
||||
background: #C9C9C9;
|
||||
padding: 10px 0px;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
#sync2 .item h1{
|
||||
font-size: 18px;
|
||||
}
|
||||
#sync2 .synced .item{
|
||||
background: #0c83e7;
|
||||
}
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#sync1 .item{
|
||||
background: #0c83e7;
|
||||
padding: 80px 0px;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
#sync2 .item{
|
||||
background: #C9C9C9;
|
||||
padding: 10px 0px;
|
||||
margin: 5px;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
#sync2 .item h1{
|
||||
font-size: 18px;
|
||||
}
|
||||
#sync2 .synced .item{
|
||||
background: #0c83e7;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
var sync1 = $("#sync1");
|
||||
var sync2 = $("#sync2");
|
||||
|
||||
sync1.owlCarousel({
|
||||
singleItem : true,
|
||||
slideSpeed : 1000,
|
||||
navigation: true,
|
||||
pagination:false,
|
||||
afterAction : syncPosition,
|
||||
responsiveRefreshRate : 200,
|
||||
});
|
||||
|
||||
sync2.owlCarousel({
|
||||
items : 15,
|
||||
itemsDesktop : [1199,10],
|
||||
itemsDesktopSmall : [979,10],
|
||||
itemsTablet : [768,8],
|
||||
itemsMobile : [479,4],
|
||||
pagination:false,
|
||||
responsiveRefreshRate : 100,
|
||||
afterInit : function(el){
|
||||
el.find(".owl-item").eq(0).addClass("synced");
|
||||
}
|
||||
});
|
||||
|
||||
function syncPosition(el){
|
||||
var current = this.currentItem;
|
||||
$("#sync2")
|
||||
.find(".owl-item")
|
||||
.removeClass("synced")
|
||||
.eq(current)
|
||||
.addClass("synced")
|
||||
if($("#sync2").data("owlCarousel") !== undefined){
|
||||
center(current)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$("#sync2").on("click", ".owl-item", function(e){
|
||||
e.preventDefault();
|
||||
var number = $(this).data("owlItem");
|
||||
sync1.trigger("owl.goTo",number);
|
||||
});
|
||||
|
||||
function center(number){
|
||||
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
|
||||
|
||||
var num = number;
|
||||
var found = false;
|
||||
for(var i in sync2visible){
|
||||
if(num === sync2visible[i]){
|
||||
var found = true;
|
||||
}
|
||||
}
|
||||
|
||||
if(found===false){
|
||||
if(num>sync2visible[sync2visible.length-1]){
|
||||
sync2.trigger("owl.goTo", num - sync2visible.length+2)
|
||||
}else{
|
||||
if(num - 1 === -1){
|
||||
num = 0;
|
||||
}
|
||||
sync2.trigger("owl.goTo", num);
|
||||
}
|
||||
} else if(num === sync2visible[sync2visible.length-1]){
|
||||
sync2.trigger("owl.goTo", sync2visible[1])
|
||||
} else if(num === sync2visible[0]){
|
||||
sync2.trigger("owl.goTo", num-1)
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,330 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Owl Carousel - CSS3 Transitions</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
||||
<meta name="author" content="Bartosz Wojciechowski">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
||||
<link href="../assets/css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- Owl Carousel Assets -->
|
||||
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
||||
<link href="../owl-carousel/owl.transitions.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="top-nav" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
||||
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-left">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>CSS3 Transitions</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<div id="owl-demo" class="owl-carousel">
|
||||
<div class="item"><img src="assets/fullimage4.jpg"></div>
|
||||
<div class="item"><img src="assets/fullimage5.jpg"></div>
|
||||
<div class="item"><img src="assets/fullimage6.jpg"></div>
|
||||
<div class="item"><img src="assets/fullimage7.jpg"></div>
|
||||
<div class="item"><img src="assets/fullimage1.jpg" ></div>
|
||||
<div class="item"><img src="assets/fullimage2.jpg"></div>
|
||||
<div class="item"><img src="assets/fullimage3.jpg"></div>
|
||||
</div>
|
||||
<label for="transitionType">Select Transition Type</label>
|
||||
<select name="transitionType" id="transitionType">
|
||||
<option value="fade">fade</option>
|
||||
<option value="backSlide">backSlide</option>
|
||||
<option value="goDown">goDown</option>
|
||||
<option value="fadeUp">fadeUp</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="example-info">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>Setup</h1>
|
||||
<p>From update 1.3.2 all transitions styles are moved out from main owl.carousel.css file to owl.transitions.css</p>
|
||||
<p><strong>Important! CSS3 transition works only in modern browsers that support CSS3 translate3d methods and only with single item on screen.</strong><br><br>
|
||||
Use <code>transitionStyle</code> option to set transtion. There are four predefined transitions: <code>"fade"</code>, <code>"backSlide"</code>, <code>goDown</code> and <code>scaleUp</code>.
|
||||
<br><br>
|
||||
You can also build your own transition styles easily. For example by adding "YourName" value <code>transitionStyle: "YourName"</code>, owlCarousel will add <code>.owl-YourName-out</code> class to previous slide and <code>.owl-YourName-in</code> to next slide. All transitions require "in" and "out" styles. Look into owl.carousel.css source for details. </p>
|
||||
<ul class="nav nav-tabs" id="myTab">
|
||||
<li class="active"><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#HTML">HTML</a></li>
|
||||
<li><a href="#CSS">CSS</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="javascript">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
|
||||
var owl = $("#owl-demo");
|
||||
|
||||
owl.owlCarousel({
|
||||
navigation : true,
|
||||
singleItem : true,
|
||||
transitionStyle : "fade"
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="HTML">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
<div id="owl-demo" class="owl-carousel owl-theme">
|
||||
|
||||
<div class="item"><img src="assets/fullimage4.jpg"></div>
|
||||
<div class="item"><img src="assets/fullimage5.jpg"></div>
|
||||
<div class="item"><img src="assets/fullimage6.jpg"></div>
|
||||
<div class="item"><img src="assets/fullimage7.jpg"></div>
|
||||
<div class="item"><img src="assets/fullimage1.jpg"></div>
|
||||
<div class="item"><img src="assets/fullimage2.jpg"></div>
|
||||
<div class="item"><img src="assets/fullimage3.jpg"></div>
|
||||
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="CSS">
|
||||
<pre class="pre-show prettyprint linenums">
|
||||
#owl-demo .item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--End Tab Content-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="more">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h1>More Demos</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="images.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-images clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Images</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="custom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="itemsCustom.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-full clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Custom 2</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="one.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-one clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>One Slide</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row demos-row">
|
||||
<div class="span3">
|
||||
<a href="json.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="customJson.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-Json-custom clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>JSON Custom</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="lazyLoad.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-lazy clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Lazy Load</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<a href="autoHeight.html" class="demo-box">
|
||||
<div class="demo-wrapper demo-height clearfix">
|
||||
<div class="demo-slide"><div class="bg"></div></div>
|
||||
</div>
|
||||
<h3>Auto Height</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
||||
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
||||
<a href="../changelog.html">changelog</a> /
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
||||
<script>
|
||||
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
||||
if(owldomain !== -1){
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
}
|
||||
</script>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
||||
<script src="../owl-carousel/owl.carousel.js"></script>
|
||||
|
||||
<!-- Demo -->
|
||||
|
||||
<style>
|
||||
#owl-demo .item img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
var owl = $("#owl-demo");
|
||||
|
||||
owl.owlCarousel({
|
||||
navigation : true,
|
||||
singleItem : true,
|
||||
transitionStyle : "fade"
|
||||
});
|
||||
|
||||
//Select Transtion Type
|
||||
$("#transitionType").change(function(){
|
||||
var newValue = $(this).val();
|
||||
|
||||
//TransitionTypes is owlCarousel inner method.
|
||||
owl.data("owlCarousel").transitionTypes(newValue);
|
||||
|
||||
//After change type go to next slide
|
||||
owl.trigger("owl.next");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user