jekyll-theme-artsy 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/css/bootstrap.min.css +8143 -0
- data/css/galleries.css +150 -0
- data/css/home.css +151 -0
- data/css/journal.css +235 -0
- data/css/magnificpopup.css +352 -0
- data/css/main.css +856 -0
- data/css/selena.css +50 -0
- data/css/super-search.css +110 -0
- data/css/tags-wrap.css +35 -0
- data/img/404.jpg +0 -0
- data/img/about-bg.jpg +0 -0
- data/img/add-to-cart.png +0 -0
- data/img/archive-bg.jpg +0 -0
- data/img/avatar.png +0 -0
- data/img/bookbutton.png +0 -0
- data/img/cart-empty.png +0 -0
- data/img/cart-full.png +0 -0
- data/img/donate.png +0 -0
- data/img/gallery-bg.jpg +0 -0
- data/img/journal/post01.jpg +0 -0
- data/img/journal/post02.jpg +0 -0
- data/img/journal/post03.jpg +0 -0
- data/img/left-arrow.svg +36 -0
- data/img/lightbox/close.png +0 -0
- data/img/lightbox/loading.gif +0 -0
- data/img/lightbox/next.png +0 -0
- data/img/lightbox/prev.png +0 -0
- data/img/loading.gif +0 -0
- data/img/logo.png +0 -0
- data/img/misc-bg.jpg +0 -0
- data/img/postcover/pc001.jpg +0 -0
- data/img/postcover/pc002.jpg +0 -0
- data/img/postcover/pc003.jpg +0 -0
- data/img/postcover/pc004.jpg +0 -0
- data/img/postcover/pc005.jpg +0 -0
- data/img/postcover/pc006.jpg +0 -0
- data/img/postcover/pc007.jpg +0 -0
- data/img/postcover/pc008.jpg +0 -0
- data/img/right-arrow.svg +36 -0
- data/img/siteicon.png +0 -0
- data/img/watermark-1900x1900-alt.png +0 -0
- data/img/watermark-1900x1900.png +0 -0
- data/img/watermark-800x800.png +0 -0
- data/img/writing-bg.jpg +0 -0
- data/js/dripload.js +37 -0
- data/js/fullcart.js +22 -0
- data/js/isotope.pkgd.min.js +8 -0
- data/js/jquery.cycle.min.js +1 -0
- data/js/jquery.isotope.min.js +13 -0
- data/js/jquery.lazylinepainter.min.js +17 -0
- data/js/jquery.magnific-popup.js +1861 -0
- data/js/jquery.mousewheel.min.js +8 -0
- data/js/jquery.tinycarousel.min.js +7 -0
- data/js/kenburns.min.js +6 -0
- data/js/main.min.js +588 -0
- data/js/modernizr.js +2 -0
- data/js/owlcarousel/.gitattributes +5 -0
- data/js/owlcarousel/.gitignore +18 -0
- data/js/owlcarousel/.travis.yml +14 -0
- data/js/owlcarousel/CONTRIBUTING.md +88 -0
- data/js/owlcarousel/Gruntfile.js +320 -0
- data/js/owlcarousel/ISSUE_TEMPLATE.md +14 -0
- data/js/owlcarousel/LICENSE +23 -0
- data/js/owlcarousel/README.md +122 -0
- data/js/owlcarousel/ROADMAP.md +57 -0
- data/js/owlcarousel/_config.json +30 -0
- data/js/owlcarousel/bower.json +13 -0
- data/js/owlcarousel/dist/LICENSE +23 -0
- data/js/owlcarousel/dist/README.md +122 -0
- data/js/owlcarousel/dist/assets/ajax-loader.gif +0 -0
- data/js/owlcarousel/dist/assets/owl.carousel.css +186 -0
- data/js/owlcarousel/dist/assets/owl.carousel.min.css +6 -0
- data/js/owlcarousel/dist/assets/owl.theme.default.css +50 -0
- data/js/owlcarousel/dist/assets/owl.theme.default.min.css +6 -0
- data/js/owlcarousel/dist/assets/owl.theme.green.css +50 -0
- data/js/owlcarousel/dist/assets/owl.theme.green.min.css +6 -0
- data/js/owlcarousel/dist/assets/owl.video.play.png +0 -0
- data/js/owlcarousel/dist/owl.carousel.js +3448 -0
- data/js/owlcarousel/dist/owl.carousel.min.js +7 -0
- data/js/owlcarousel/docs/assets/css/animate.css +3303 -0
- data/js/owlcarousel/docs/assets/css/docs.theme.min.css +1 -0
- data/js/owlcarousel/docs/assets/img/bird_blue_32.png +0 -0
- data/js/owlcarousel/docs/assets/img/download.png +0 -0
- data/js/owlcarousel/docs/assets/img/feature-drag.png +0 -0
- data/js/owlcarousel/docs/assets/img/feature-modern.png +0 -0
- data/js/owlcarousel/docs/assets/img/feature-module.png +0 -0
- data/js/owlcarousel/docs/assets/img/feature-options.png +0 -0
- data/js/owlcarousel/docs/assets/img/feature-responsive.png +0 -0
- data/js/owlcarousel/docs/assets/img/feature-zombie.png +0 -0
- data/js/owlcarousel/docs/assets/img/owl-logo.png +0 -0
- data/js/owlcarousel/docs/assets/img/twitter_25.png +0 -0
- data/js/owlcarousel/docs/assets/js/app.js +32 -0
- data/js/owlcarousel/docs/assets/js/foundation.min.js +3 -0
- data/js/owlcarousel/docs/assets/owlcarousel/README.md +122 -0
- data/js/owlcarousel/docs/assets/owlcarousel/assets/ajax-loader.gif +0 -0
- data/js/owlcarousel/docs/assets/owlcarousel/assets/owl.carousel.css +186 -0
- data/js/owlcarousel/docs/assets/owlcarousel/assets/owl.carousel.min.css +6 -0
- data/js/owlcarousel/docs/assets/owlcarousel/assets/owl.theme.default.css +50 -0
- data/js/owlcarousel/docs/assets/owlcarousel/assets/owl.theme.default.min.css +6 -0
- data/js/owlcarousel/docs/assets/owlcarousel/assets/owl.theme.green.css +50 -0
- data/js/owlcarousel/docs/assets/owlcarousel/assets/owl.theme.green.min.css +6 -0
- data/js/owlcarousel/docs/assets/owlcarousel/assets/owl.video.play.png +0 -0
- data/js/owlcarousel/docs/assets/owlcarousel/owl.carousel.js +3448 -0
- data/js/owlcarousel/docs/assets/owlcarousel/owl.carousel.min.js +7 -0
- data/js/owlcarousel/docs/assets/vendors/foundation.min.js +3 -0
- data/js/owlcarousel/docs/assets/vendors/highlight.js +1 -0
- data/js/owlcarousel/docs/assets/vendors/jquery.min.js +2 -0
- data/js/owlcarousel/docs/assets/vendors/jquery.min.map +1 -0
- data/js/owlcarousel/docs/assets/vendors/jquery.mousewheel.min.js +8 -0
- data/js/owlcarousel/docs/demos/animate.html +272 -0
- data/js/owlcarousel/docs/demos/autoheight.html +165 -0
- data/js/owlcarousel/docs/demos/autoplay.html +186 -0
- data/js/owlcarousel/docs/demos/autowidth.html +185 -0
- data/js/owlcarousel/docs/demos/basic.html +199 -0
- data/js/owlcarousel/docs/demos/center.html +239 -0
- data/js/owlcarousel/docs/demos/demos.html +198 -0
- data/js/owlcarousel/docs/demos/events.html +207 -0
- data/js/owlcarousel/docs/demos/lazyLoad.html +165 -0
- data/js/owlcarousel/docs/demos/merge.html +202 -0
- data/js/owlcarousel/docs/demos/mousewheel.html +209 -0
- data/js/owlcarousel/docs/demos/responsive.html +297 -0
- data/js/owlcarousel/docs/demos/rtl.html +202 -0
- data/js/owlcarousel/docs/demos/stagepadding.html +202 -0
- data/js/owlcarousel/docs/demos/test.html +144 -0
- data/js/owlcarousel/docs/demos/urlhashnav.html +190 -0
- data/js/owlcarousel/docs/demos/video.html +189 -0
- data/js/owlcarousel/docs/docs/api-classes.html +227 -0
- data/js/owlcarousel/docs/docs/api-events.html +358 -0
- data/js/owlcarousel/docs/docs/api-options.html +395 -0
- data/js/owlcarousel/docs/docs/dev-buildin-plugins.html +157 -0
- data/js/owlcarousel/docs/docs/dev-external.html +151 -0
- data/js/owlcarousel/docs/docs/dev-plugin-api.html +160 -0
- data/js/owlcarousel/docs/docs/dev-styles.html +171 -0
- data/js/owlcarousel/docs/docs/started-faq.html +162 -0
- data/js/owlcarousel/docs/docs/started-installation.html +173 -0
- data/js/owlcarousel/docs/docs/started-welcome.html +196 -0
- data/js/owlcarousel/docs/docs/support-changelog.html +169 -0
- data/js/owlcarousel/docs/docs/support-contact.html +140 -0
- data/js/owlcarousel/docs/docs/support-contributing.html +162 -0
- data/js/owlcarousel/docs/index.html +239 -0
- data/js/owlcarousel/package-lock.json +6169 -0
- data/js/owlcarousel/package.json +57 -0
- data/js/owlcarousel/src/img/ajax-loader.gif +0 -0
- data/js/owlcarousel/src/img/owl.video.play.png +0 -0
- data/js/owlcarousel/src/js/.jscsrc +47 -0
- data/js/owlcarousel/src/js/.jshintrc +13 -0
- data/js/owlcarousel/src/js/owl.animate.js +121 -0
- data/js/owlcarousel/src/js/owl.autoheight.js +132 -0
- data/js/owlcarousel/src/js/owl.autoplay.js +233 -0
- data/js/owlcarousel/src/js/owl.autorefresh.js +111 -0
- data/js/owlcarousel/src/js/owl.carousel.js +1750 -0
- data/js/owlcarousel/src/js/owl.hash.js +122 -0
- data/js/owlcarousel/src/js/owl.lazyload.js +149 -0
- data/js/owlcarousel/src/js/owl.navigation.js +406 -0
- data/js/owlcarousel/src/js/owl.support.js +83 -0
- data/js/owlcarousel/src/js/owl.support.modernizr.js +66 -0
- data/js/owlcarousel/src/js/owl.video.js +327 -0
- data/js/owlcarousel/src/scss/_animate.scss +28 -0
- data/js/owlcarousel/src/scss/_autoheight.scss +7 -0
- data/js/owlcarousel/src/scss/_core.scss +126 -0
- data/js/owlcarousel/src/scss/_lazyload.scss +25 -0
- data/js/owlcarousel/src/scss/_theme.default.scss +30 -0
- data/js/owlcarousel/src/scss/_theme.green.scss +30 -0
- data/js/owlcarousel/src/scss/_theme.scss +64 -0
- data/js/owlcarousel/src/scss/_video.scss +53 -0
- data/js/owlcarousel/src/scss/owl.carousel.scss +5 -0
- data/js/owlcarousel/src/scss/owl.theme.default.scss +1 -0
- data/js/owlcarousel/src/scss/owl.theme.green.scss +1 -0
- data/js/owlcarousel/test/index.html +32 -0
- data/js/owlcarousel/test/unit/autoplay.js +86 -0
- data/js/owlcarousel/test/unit/core.js +140 -0
- data/js/retina.min.js +10 -0
- data/js/scripts.js +204 -0
- data/js/super-search.js +136 -0
- data/js/zepto.min.js +2 -0
- metadata +176 -1
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
|
|
5
|
+
<!-- head -->
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta name="msapplication-tap-highlight" content="no" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
+
<meta name="description" content="Lazy Load carousel">
|
|
10
|
+
<meta name="author" content="David Deutsch">
|
|
11
|
+
<title>
|
|
12
|
+
Lazy Load Demo | Owl Carousel | 2.3.4
|
|
13
|
+
</title>
|
|
14
|
+
|
|
15
|
+
<!-- Stylesheets -->
|
|
16
|
+
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
|
17
|
+
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
|
18
|
+
|
|
19
|
+
<!-- Owl Stylesheets -->
|
|
20
|
+
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
|
21
|
+
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
|
22
|
+
|
|
23
|
+
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
24
|
+
|
|
25
|
+
<!--[if lt IE 9]>
|
|
26
|
+
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
27
|
+
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
|
28
|
+
<![endif]-->
|
|
29
|
+
|
|
30
|
+
<!-- Favicons -->
|
|
31
|
+
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
|
32
|
+
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
|
33
|
+
<link rel="shortcut icon" href="favicon.ico">
|
|
34
|
+
|
|
35
|
+
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
|
36
|
+
|
|
37
|
+
<!-- javascript -->
|
|
38
|
+
<script src="../assets/vendors/jquery.min.js"></script>
|
|
39
|
+
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
|
40
|
+
</head>
|
|
41
|
+
<body>
|
|
42
|
+
|
|
43
|
+
<!-- header -->
|
|
44
|
+
<header class="header">
|
|
45
|
+
<div class="row">
|
|
46
|
+
<div class="large-12 columns">
|
|
47
|
+
<div class="brand left">
|
|
48
|
+
<h3>
|
|
49
|
+
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
|
50
|
+
</h3>
|
|
51
|
+
</div>
|
|
52
|
+
<a id="toggle-nav" class="right">
|
|
53
|
+
<span></span> <span></span> <span></span>
|
|
54
|
+
</a>
|
|
55
|
+
<div class="nav-bar">
|
|
56
|
+
<ul class="clearfix">
|
|
57
|
+
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
|
58
|
+
<li class="active">
|
|
59
|
+
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
|
60
|
+
</li>
|
|
61
|
+
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
|
62
|
+
<li>
|
|
63
|
+
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
|
64
|
+
<span class="download"></span>
|
|
65
|
+
</li>
|
|
66
|
+
</ul>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</header>
|
|
71
|
+
|
|
72
|
+
<!-- title -->
|
|
73
|
+
<section class="title">
|
|
74
|
+
<div class="row">
|
|
75
|
+
<div class="large-12 columns">
|
|
76
|
+
<h1>Lazy Load</h1>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</section>
|
|
80
|
+
|
|
81
|
+
<!-- Demos -->
|
|
82
|
+
<section id="demos">
|
|
83
|
+
<div class="row">
|
|
84
|
+
<div class="large-12 columns">
|
|
85
|
+
<div class="owl-carousel owl-theme">
|
|
86
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
|
|
87
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x350&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
|
|
88
|
+
<picture>
|
|
89
|
+
<source class="owl-lazy" media="(min-width: 650px)" data-srcset="https://placehold.it/350x250&text=3-large">
|
|
90
|
+
<source class="owl-lazy" media="(min-width: 350px)" data-srcset="https://placehold.it/350x250&text=3-medium">
|
|
91
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=3-fallback" alt="">
|
|
92
|
+
</picture>
|
|
93
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
|
|
94
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
|
|
95
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
|
|
96
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
|
|
97
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
|
|
98
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x400&text=9" alt="">
|
|
99
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x400&text=10" alt="">
|
|
100
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x450&text=11" alt="">
|
|
101
|
+
</div>
|
|
102
|
+
<h3 id="overview">Overview</h3>
|
|
103
|
+
<p>Add lazyLoad to plugin setup:</p>
|
|
104
|
+
<pre><code>lazyLoad: true</code></pre>
|
|
105
|
+
<p>LazyLoad HTML structure requires <code>class="owl-lazy"</code> and <code>data-src="url_to_img"</code> or/and <code>data-src-retina="url_to_highres_img"</code>. If you set above settings not on <code><img></code> but on other DOM element then Owl will load an image into css inline background style. You can even use picture tags with different sources by adding the <code>owl-lazy</code> class to the source tag and a data-srcset attribute.</p>
|
|
106
|
+
<h3 id="setup">Setup</h3>
|
|
107
|
+
<pre><code>$('.owl-carousel').owlCarousel({
|
|
108
|
+
items:4,
|
|
109
|
+
lazyLoad:true,
|
|
110
|
+
loop:true,
|
|
111
|
+
margin:10
|
|
112
|
+
});</code></pre>
|
|
113
|
+
<h3 id="option">Option</h3>
|
|
114
|
+
<p>If you want to preload images you can also add the option <code>lazyLoadEager</code> to the settings object, where the value indicates how many items to the right (and left, when loop is <code>true</code>) will be pre-loaded.</p>
|
|
115
|
+
<h3 id="html-">HTML:</h3>
|
|
116
|
+
<pre><code><div class="owl-carousel owl-theme">
|
|
117
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x450&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
|
|
118
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x650&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
|
|
119
|
+
<picture>
|
|
120
|
+
<source class="owl-lazy" media="(min-width: 650px)" data-srcset="https://placehold.it/350x250&text=3-large">
|
|
121
|
+
<source class="owl-lazy" media="(min-width: 350px)" data-srcset="https://placehold.it/350x250&text=3-medium">
|
|
122
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=3-fallback" alt="">
|
|
123
|
+
</picture>
|
|
124
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
|
|
125
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
|
|
126
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
|
|
127
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
|
|
128
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
|
|
129
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x400&text=9" alt="">
|
|
130
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x400&text=10" alt="">
|
|
131
|
+
<img class="owl-lazy" data-src="https://placehold.it/350x450&text=11" alt="">
|
|
132
|
+
</div></code></pre>
|
|
133
|
+
<script>
|
|
134
|
+
jQuery(document).ready(function($) {
|
|
135
|
+
$('.owl-carousel').owlCarousel({
|
|
136
|
+
items: 1,
|
|
137
|
+
lazyLoad: true,
|
|
138
|
+
lazyLoadEager: 1,
|
|
139
|
+
loop: true,
|
|
140
|
+
margin: 10,
|
|
141
|
+
autoHeight: true
|
|
142
|
+
});
|
|
143
|
+
});
|
|
144
|
+
</script>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</section>
|
|
148
|
+
|
|
149
|
+
<!-- footer -->
|
|
150
|
+
<footer class="footer">
|
|
151
|
+
<div class="row">
|
|
152
|
+
<div class="large-12 columns">
|
|
153
|
+
<h5>
|
|
154
|
+
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
|
155
|
+
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
|
156
|
+
</h5>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
</footer>
|
|
160
|
+
|
|
161
|
+
<!-- vendors -->
|
|
162
|
+
<script src="../assets/vendors/highlight.js"></script>
|
|
163
|
+
<script src="../assets/js/app.js"></script>
|
|
164
|
+
</body>
|
|
165
|
+
</html>
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
|
|
5
|
+
<!-- head -->
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta name="msapplication-tap-highlight" content="no" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
+
<meta name="description" content="Merge Items">
|
|
10
|
+
<meta name="author" content="David Deutsch">
|
|
11
|
+
<title>
|
|
12
|
+
Merge Demo | Owl Carousel | 2.3.4
|
|
13
|
+
</title>
|
|
14
|
+
|
|
15
|
+
<!-- Stylesheets -->
|
|
16
|
+
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
|
17
|
+
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
|
18
|
+
|
|
19
|
+
<!-- Owl Stylesheets -->
|
|
20
|
+
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
|
21
|
+
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
|
22
|
+
|
|
23
|
+
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
24
|
+
|
|
25
|
+
<!--[if lt IE 9]>
|
|
26
|
+
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
27
|
+
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
|
28
|
+
<![endif]-->
|
|
29
|
+
|
|
30
|
+
<!-- Favicons -->
|
|
31
|
+
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
|
32
|
+
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
|
33
|
+
<link rel="shortcut icon" href="favicon.ico">
|
|
34
|
+
|
|
35
|
+
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
|
36
|
+
|
|
37
|
+
<!-- javascript -->
|
|
38
|
+
<script src="../assets/vendors/jquery.min.js"></script>
|
|
39
|
+
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
|
40
|
+
</head>
|
|
41
|
+
<body>
|
|
42
|
+
|
|
43
|
+
<!-- header -->
|
|
44
|
+
<header class="header">
|
|
45
|
+
<div class="row">
|
|
46
|
+
<div class="large-12 columns">
|
|
47
|
+
<div class="brand left">
|
|
48
|
+
<h3>
|
|
49
|
+
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
|
50
|
+
</h3>
|
|
51
|
+
</div>
|
|
52
|
+
<a id="toggle-nav" class="right">
|
|
53
|
+
<span></span> <span></span> <span></span>
|
|
54
|
+
</a>
|
|
55
|
+
<div class="nav-bar">
|
|
56
|
+
<ul class="clearfix">
|
|
57
|
+
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
|
58
|
+
<li class="active">
|
|
59
|
+
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
|
60
|
+
</li>
|
|
61
|
+
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
|
62
|
+
<li>
|
|
63
|
+
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
|
64
|
+
<span class="download"></span>
|
|
65
|
+
</li>
|
|
66
|
+
</ul>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</header>
|
|
71
|
+
|
|
72
|
+
<!-- title -->
|
|
73
|
+
<section class="title">
|
|
74
|
+
<div class="row">
|
|
75
|
+
<div class="large-12 columns">
|
|
76
|
+
<h1>Merge</h1>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</section>
|
|
80
|
+
|
|
81
|
+
<!-- Demos -->
|
|
82
|
+
<section id="demos">
|
|
83
|
+
<div class="row">
|
|
84
|
+
<div class="large-12 columns">
|
|
85
|
+
<div class="owl-carousel owl-theme">
|
|
86
|
+
<div class="item" data-merge="1">
|
|
87
|
+
<h4>1</h4>
|
|
88
|
+
</div>
|
|
89
|
+
<div class="item" data-merge="2">
|
|
90
|
+
<h4>2</h4>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="item" data-merge="1">
|
|
93
|
+
<h4>3</h4>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="item" data-merge="3">
|
|
96
|
+
<h4>4</h4>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="item" data-merge="6">
|
|
99
|
+
<h4>6</h4>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="item" data-merge="2">
|
|
102
|
+
<h4>7</h4>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="item" data-merge="1">
|
|
105
|
+
<h4>8</h4>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="item" data-merge="3">
|
|
108
|
+
<h4>9</h4>
|
|
109
|
+
</div>
|
|
110
|
+
<div class="item">
|
|
111
|
+
<h4>10</h4>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="item">
|
|
114
|
+
<h4>11</h4>
|
|
115
|
+
</div>
|
|
116
|
+
<div class="item" data-merge="2">
|
|
117
|
+
<h4>12</h4>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="item">
|
|
120
|
+
<h4>13</h4>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="item">
|
|
123
|
+
<h4>14</h4>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="item">
|
|
126
|
+
<h4>15</h4>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
<h3 id="overview">Overview</h3>
|
|
130
|
+
<p>Merge option requires <code>data-merge="number_items_to_merge"</code> on any child element (can be nested as well). There is a sibling option called <code>mergeFit</code> which fits merged elements to screen size. </p>
|
|
131
|
+
<p>See item 6 on breakpoint below and above <code>1000px</code> screen width.</p>
|
|
132
|
+
<h3 id="setup">Setup</h3>
|
|
133
|
+
<pre><code>$('.owl-carousel').owlCarousel({
|
|
134
|
+
items:5,
|
|
135
|
+
loop:true,
|
|
136
|
+
margin:10,
|
|
137
|
+
merge:true,
|
|
138
|
+
responsive:{
|
|
139
|
+
678:{
|
|
140
|
+
mergeFit:true
|
|
141
|
+
},
|
|
142
|
+
1000:{
|
|
143
|
+
mergeFit:false
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
});</code></pre>
|
|
147
|
+
<h3 id="html">html</h3>
|
|
148
|
+
<pre><code><div class="owl-carousel owl-theme">
|
|
149
|
+
<div class="item" data-merge="1"><h2>1</h2></div>
|
|
150
|
+
<div class="item" data-merge="2"><h2>2</h2></div>
|
|
151
|
+
<div class="item" data-merge="1"><h2>3</h2></div>
|
|
152
|
+
<div class="item" data-merge="3"><h2>4</h2></div>
|
|
153
|
+
<div class="item" data-merge="6"><h2>6</h2></div>
|
|
154
|
+
<div class="item" data-merge="2"><h2>7</h2></div>
|
|
155
|
+
<div class="item" data-merge="1"><h2>8</h2></div>
|
|
156
|
+
<div class="item" data-merge="3"><h2>9</h2></div>
|
|
157
|
+
<div class="item"><h2>10</h2></div>
|
|
158
|
+
<div class="item"><h2>11</h2></div>
|
|
159
|
+
<div class="item" data-merge="2"><h2>12</h2></div>
|
|
160
|
+
<div class="item"><h2>13</h2></div>
|
|
161
|
+
<div class="item"><h2>14</h2></div>
|
|
162
|
+
<div class="item"><h2>15</h2></div>
|
|
163
|
+
</div></code></pre>
|
|
164
|
+
<script>
|
|
165
|
+
$(document).ready(function() {
|
|
166
|
+
$('.owl-carousel').owlCarousel({
|
|
167
|
+
items: 5,
|
|
168
|
+
loop: true,
|
|
169
|
+
margin: 10,
|
|
170
|
+
merge: true,
|
|
171
|
+
responsive: {
|
|
172
|
+
678: {
|
|
173
|
+
mergeFit: true
|
|
174
|
+
},
|
|
175
|
+
1000: {
|
|
176
|
+
mergeFit: false
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
});
|
|
180
|
+
})
|
|
181
|
+
</script>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
</section>
|
|
185
|
+
|
|
186
|
+
<!-- footer -->
|
|
187
|
+
<footer class="footer">
|
|
188
|
+
<div class="row">
|
|
189
|
+
<div class="large-12 columns">
|
|
190
|
+
<h5>
|
|
191
|
+
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
|
192
|
+
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
|
193
|
+
</h5>
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
</footer>
|
|
197
|
+
|
|
198
|
+
<!-- vendors -->
|
|
199
|
+
<script src="../assets/vendors/highlight.js"></script>
|
|
200
|
+
<script src="../assets/js/app.js"></script>
|
|
201
|
+
</body>
|
|
202
|
+
</html>
|
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
|
|
5
|
+
<!-- head -->
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta name="msapplication-tap-highlight" content="no" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
+
<meta name="description" content="Mousewheel usage demo">
|
|
10
|
+
<meta name="author" content="David Deutsch">
|
|
11
|
+
<title>
|
|
12
|
+
Mousewheel Demo | Owl Carousel | 2.3.4
|
|
13
|
+
</title>
|
|
14
|
+
|
|
15
|
+
<!-- Stylesheets -->
|
|
16
|
+
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
|
|
17
|
+
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
|
|
18
|
+
|
|
19
|
+
<!-- Owl Stylesheets -->
|
|
20
|
+
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
|
|
21
|
+
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
|
|
22
|
+
|
|
23
|
+
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
24
|
+
|
|
25
|
+
<!--[if lt IE 9]>
|
|
26
|
+
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
27
|
+
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
|
28
|
+
<![endif]-->
|
|
29
|
+
|
|
30
|
+
<!-- Favicons -->
|
|
31
|
+
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
|
32
|
+
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
|
33
|
+
<link rel="shortcut icon" href="favicon.ico">
|
|
34
|
+
|
|
35
|
+
<!-- Yeah i know js should not be in header. Its required for demos.-->
|
|
36
|
+
|
|
37
|
+
<!-- javascript -->
|
|
38
|
+
<script src="../assets/vendors/jquery.min.js"></script>
|
|
39
|
+
<script src="../assets/owlcarousel/owl.carousel.js"></script>
|
|
40
|
+
</head>
|
|
41
|
+
<body>
|
|
42
|
+
|
|
43
|
+
<!-- header -->
|
|
44
|
+
<header class="header">
|
|
45
|
+
<div class="row">
|
|
46
|
+
<div class="large-12 columns">
|
|
47
|
+
<div class="brand left">
|
|
48
|
+
<h3>
|
|
49
|
+
<a href="/OwlCarousel2/">owl.carousel.js</a>
|
|
50
|
+
</h3>
|
|
51
|
+
</div>
|
|
52
|
+
<a id="toggle-nav" class="right">
|
|
53
|
+
<span></span> <span></span> <span></span>
|
|
54
|
+
</a>
|
|
55
|
+
<div class="nav-bar">
|
|
56
|
+
<ul class="clearfix">
|
|
57
|
+
<li> <a href="/OwlCarousel2/index.html">Home</a> </li>
|
|
58
|
+
<li class="active">
|
|
59
|
+
<a href="/OwlCarousel2/demos/demos.html">Demos</a>
|
|
60
|
+
</li>
|
|
61
|
+
<li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
|
|
62
|
+
<li>
|
|
63
|
+
<a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
|
|
64
|
+
<span class="download"></span>
|
|
65
|
+
</li>
|
|
66
|
+
</ul>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</header>
|
|
71
|
+
|
|
72
|
+
<!-- title -->
|
|
73
|
+
<section class="title">
|
|
74
|
+
<div class="row">
|
|
75
|
+
<div class="large-12 columns">
|
|
76
|
+
<h1>Mousewheel</h1>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</section>
|
|
80
|
+
|
|
81
|
+
<!-- Demos -->
|
|
82
|
+
<section id="demos">
|
|
83
|
+
<div class="row">
|
|
84
|
+
<div class="large-12 columns">
|
|
85
|
+
<div class="owl-carousel owl-theme">
|
|
86
|
+
<div class="item">
|
|
87
|
+
<h4>1</h4>
|
|
88
|
+
</div>
|
|
89
|
+
<div class="item">
|
|
90
|
+
<h4>2</h4>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="item">
|
|
93
|
+
<h4>3</h4>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="item">
|
|
96
|
+
<h4>4</h4>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="item">
|
|
99
|
+
<h4>5</h4>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="item">
|
|
102
|
+
<h4>6</h4>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="item">
|
|
105
|
+
<h4>7</h4>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="item">
|
|
108
|
+
<h4>8</h4>
|
|
109
|
+
</div>
|
|
110
|
+
<div class="item">
|
|
111
|
+
<h4>9</h4>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="item">
|
|
114
|
+
<h4>10</h4>
|
|
115
|
+
</div>
|
|
116
|
+
<div class="item">
|
|
117
|
+
<h4>11</h4>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="item">
|
|
120
|
+
<h4>12</h4>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
<h3 id="overview">Overview</h3>
|
|
124
|
+
<p>To add mouswheel scrolling just include the fantastic plugin jquery.mousewheel.js created by Brandon Aaron.
|
|
125
|
+
<a href="https://github.com/brandonaaron/jquery-mousewheel">Link to plugin GitHub page</a>
|
|
126
|
+
</p>
|
|
127
|
+
<h3 id="setup">Setup</h3>
|
|
128
|
+
<pre><code>var owl = $('.owl-carousel');
|
|
129
|
+
owl.owlCarousel({
|
|
130
|
+
loop:true,
|
|
131
|
+
nav:true,
|
|
132
|
+
margin:10,
|
|
133
|
+
responsive:{
|
|
134
|
+
0:{
|
|
135
|
+
items:1
|
|
136
|
+
},
|
|
137
|
+
600:{
|
|
138
|
+
items:3
|
|
139
|
+
},
|
|
140
|
+
960:{
|
|
141
|
+
items:5
|
|
142
|
+
},
|
|
143
|
+
1200:{
|
|
144
|
+
items:6
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
});
|
|
148
|
+
owl.on('mousewheel', '.owl-stage', function (e) {
|
|
149
|
+
if (e.deltaY>0) {
|
|
150
|
+
owl.trigger('next.owl');
|
|
151
|
+
} else {
|
|
152
|
+
owl.trigger('prev.owl');
|
|
153
|
+
}
|
|
154
|
+
e.preventDefault();
|
|
155
|
+
});</code></pre>
|
|
156
|
+
<script src="../assets/vendors/jquery.mousewheel.min.js"></script>
|
|
157
|
+
<script>
|
|
158
|
+
$(document).ready(function() {
|
|
159
|
+
var owl = $('.owl-carousel');
|
|
160
|
+
owl.owlCarousel({
|
|
161
|
+
loop: true,
|
|
162
|
+
nav: true,
|
|
163
|
+
margin: 10,
|
|
164
|
+
responsive: {
|
|
165
|
+
0: {
|
|
166
|
+
items: 1
|
|
167
|
+
},
|
|
168
|
+
600: {
|
|
169
|
+
items: 3
|
|
170
|
+
},
|
|
171
|
+
960: {
|
|
172
|
+
items: 5
|
|
173
|
+
},
|
|
174
|
+
1200: {
|
|
175
|
+
items: 6
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
});
|
|
179
|
+
owl.on('mousewheel', '.owl-stage', function(e) {
|
|
180
|
+
if (e.deltaY > 0) {
|
|
181
|
+
owl.trigger('next.owl');
|
|
182
|
+
} else {
|
|
183
|
+
owl.trigger('prev.owl');
|
|
184
|
+
}
|
|
185
|
+
e.preventDefault();
|
|
186
|
+
});
|
|
187
|
+
})
|
|
188
|
+
</script>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</section>
|
|
192
|
+
|
|
193
|
+
<!-- footer -->
|
|
194
|
+
<footer class="footer">
|
|
195
|
+
<div class="row">
|
|
196
|
+
<div class="large-12 columns">
|
|
197
|
+
<h5>
|
|
198
|
+
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
|
199
|
+
<a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
|
|
200
|
+
</h5>
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
</footer>
|
|
204
|
+
|
|
205
|
+
<!-- vendors -->
|
|
206
|
+
<script src="../assets/vendors/highlight.js"></script>
|
|
207
|
+
<script src="../assets/js/app.js"></script>
|
|
208
|
+
</body>
|
|
209
|
+
</html>
|