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,186 @@
|
|
|
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="Autoplay usage demo">
|
|
10
|
+
<meta name="author" content="David Deutsch">
|
|
11
|
+
<title>
|
|
12
|
+
Autoplay 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>Autoplay</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
|
+
<a class="button secondary play">Play</a>
|
|
124
|
+
<a class="button secondary stop">Stop</a>
|
|
125
|
+
<h3 id="overview">Overview</h3>
|
|
126
|
+
<p>Autoplay plugin has three options:</p>
|
|
127
|
+
<pre><code>//default settings:
|
|
128
|
+
autoplay:false
|
|
129
|
+
autoplayTimeout:5000
|
|
130
|
+
autoplayHoverPause:false</code></pre>
|
|
131
|
+
<p>In this example i've added two buttons with custom events for play and stop:</p>
|
|
132
|
+
<pre><code>var owl = $('.owl-carousel');
|
|
133
|
+
owl.owlCarousel({
|
|
134
|
+
items:4,
|
|
135
|
+
loop:true,
|
|
136
|
+
margin:10,
|
|
137
|
+
autoplay:true,
|
|
138
|
+
autoplayTimeout:1000,
|
|
139
|
+
autoplayHoverPause:true
|
|
140
|
+
});
|
|
141
|
+
$('.play').on('click',function(){
|
|
142
|
+
owl.trigger('play.owl.autoplay',[1000])
|
|
143
|
+
})
|
|
144
|
+
$('.stop').on('click',function(){
|
|
145
|
+
owl.trigger('stop.owl.autoplay')
|
|
146
|
+
})</code></pre>
|
|
147
|
+
<script>
|
|
148
|
+
$(document).ready(function() {
|
|
149
|
+
var owl = $('.owl-carousel');
|
|
150
|
+
owl.owlCarousel({
|
|
151
|
+
items: 4,
|
|
152
|
+
loop: true,
|
|
153
|
+
margin: 10,
|
|
154
|
+
autoplay: true,
|
|
155
|
+
autoplayTimeout: 1000,
|
|
156
|
+
autoplayHoverPause: true
|
|
157
|
+
});
|
|
158
|
+
$('.play').on('click', function() {
|
|
159
|
+
owl.trigger('play.owl.autoplay', [1000])
|
|
160
|
+
})
|
|
161
|
+
$('.stop').on('click', function() {
|
|
162
|
+
owl.trigger('stop.owl.autoplay')
|
|
163
|
+
})
|
|
164
|
+
})
|
|
165
|
+
</script>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
</section>
|
|
169
|
+
|
|
170
|
+
<!-- footer -->
|
|
171
|
+
<footer class="footer">
|
|
172
|
+
<div class="row">
|
|
173
|
+
<div class="large-12 columns">
|
|
174
|
+
<h5>
|
|
175
|
+
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
|
176
|
+
<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>
|
|
177
|
+
</h5>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</footer>
|
|
181
|
+
|
|
182
|
+
<!-- vendors -->
|
|
183
|
+
<script src="../assets/vendors/highlight.js"></script>
|
|
184
|
+
<script src="../assets/js/app.js"></script>
|
|
185
|
+
</body>
|
|
186
|
+
</html>
|
|
@@ -0,0 +1,185 @@
|
|
|
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="Auto Width">
|
|
10
|
+
<meta name="author" content="David Deutsch">
|
|
11
|
+
<title>
|
|
12
|
+
Auto Width 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>Auto Width</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" style="width:250px">
|
|
87
|
+
<h4>1</h4>
|
|
88
|
+
</div>
|
|
89
|
+
<div class="item" style="width:100px">
|
|
90
|
+
<h4>2</h4>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="item" style="width:500px">
|
|
93
|
+
<h4>3</h4>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="item" style="width:100px">
|
|
96
|
+
<h4>4</h4>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="item" style="width:50px">
|
|
99
|
+
<h4>6</h4>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="item" style="width:250px">
|
|
102
|
+
<h4>7</h4>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="item" style="width:120px">
|
|
105
|
+
<h4>8</h4>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="item" style="width:420px">
|
|
108
|
+
<h4>9</h4>
|
|
109
|
+
</div>
|
|
110
|
+
<div class="item" style="width:120px">
|
|
111
|
+
<h4>10</h4>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="item" style="width:300px">
|
|
114
|
+
<h4>11</h4>
|
|
115
|
+
</div>
|
|
116
|
+
<div class="item" style="width:450px">
|
|
117
|
+
<h4>12</h4>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="item" style="width:220px">
|
|
120
|
+
<h4>13</h4>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="item" style="width:150px">
|
|
123
|
+
<h4>14</h4>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="item" style="width:600px">
|
|
126
|
+
<h4>15</h4>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
<h3 id="overview">Overview</h3>
|
|
130
|
+
<p>Use width style on elements to get the result you want. If using with infinity loop add option 'items' more than 1. It all depends on the width of your content.</p>
|
|
131
|
+
<h3 id="setup">Setup</h3>
|
|
132
|
+
<pre><code>$('.owl-carousel').owlCarousel({
|
|
133
|
+
margin:10,
|
|
134
|
+
loop:true,
|
|
135
|
+
autoWidth:true,
|
|
136
|
+
items:4
|
|
137
|
+
})</code></pre>
|
|
138
|
+
<h3 id="html">html</h3>
|
|
139
|
+
<pre><code><div class="owl-carousel owl-theme">
|
|
140
|
+
<div class="item" style="width:250px"><h4>1</h4></div>
|
|
141
|
+
<div class="item" style="width:100px"><h4>2</h4></div>
|
|
142
|
+
<div class="item" style="width:500px"><h4>3</h4></div>
|
|
143
|
+
<div class="item" style="width:100px"><h4>4</h4></div>
|
|
144
|
+
<div class="item" style="width:50px"><h4>6</h4></div>
|
|
145
|
+
<div class="item" style="width:250px"><h4>7</h4></div>
|
|
146
|
+
<div class="item" style="width:120px"><h4>8</h4></div>
|
|
147
|
+
<div class="item" style="width:420px"><h4>9</h4></div>
|
|
148
|
+
<div class="item" style="width:120px"><h4>10</h4></div>
|
|
149
|
+
<div class="item" style="width:300px"><h4>11</h4></div>
|
|
150
|
+
<div class="item" style="width:450px"><h4>12</h4></div>
|
|
151
|
+
<div class="item" style="width:220px"><h4>13</h4></div>
|
|
152
|
+
<div class="item" style="width:150px"><h4>14</h4></div>
|
|
153
|
+
<div class="item" style="width:600px"><h4>15</h4></div>
|
|
154
|
+
</div></code></pre>
|
|
155
|
+
<script>
|
|
156
|
+
$(document).ready(function() {
|
|
157
|
+
$('.owl-carousel').owlCarousel({
|
|
158
|
+
margin: 10,
|
|
159
|
+
loop: true,
|
|
160
|
+
autoWidth: true,
|
|
161
|
+
items: 4
|
|
162
|
+
})
|
|
163
|
+
})
|
|
164
|
+
</script>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
</section>
|
|
168
|
+
|
|
169
|
+
<!-- footer -->
|
|
170
|
+
<footer class="footer">
|
|
171
|
+
<div class="row">
|
|
172
|
+
<div class="large-12 columns">
|
|
173
|
+
<h5>
|
|
174
|
+
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
|
175
|
+
<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>
|
|
176
|
+
</h5>
|
|
177
|
+
</div>
|
|
178
|
+
</div>
|
|
179
|
+
</footer>
|
|
180
|
+
|
|
181
|
+
<!-- vendors -->
|
|
182
|
+
<script src="../assets/vendors/highlight.js"></script>
|
|
183
|
+
<script src="../assets/js/app.js"></script>
|
|
184
|
+
</body>
|
|
185
|
+
</html>
|
|
@@ -0,0 +1,199 @@
|
|
|
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="Basic usage demo">
|
|
10
|
+
<meta name="author" content="David Deutsch">
|
|
11
|
+
<title>
|
|
12
|
+
Basic 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>Basic</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>Basic usage of Owl Carousel. I used <code>loop:true</code> and <code>margin:10</code>. The structure works with any kind of DOM element. In all of my examples i used <code><div class="item">...</div></code> but you could
|
|
125
|
+
put any other element <code>div/span/a/img...</code></p>
|
|
126
|
+
<h3 id="setup">Setup</h3>
|
|
127
|
+
<pre><code>$('.owl-carousel').owlCarousel({
|
|
128
|
+
loop:true,
|
|
129
|
+
margin:10,
|
|
130
|
+
nav:true,
|
|
131
|
+
responsive:{
|
|
132
|
+
0:{
|
|
133
|
+
items:1
|
|
134
|
+
},
|
|
135
|
+
600:{
|
|
136
|
+
items:3
|
|
137
|
+
},
|
|
138
|
+
1000:{
|
|
139
|
+
items:5
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
})</code></pre>
|
|
143
|
+
<h3 id="html">html</h3>
|
|
144
|
+
<pre><code><div class="owl-carousel owl-theme">
|
|
145
|
+
<div class="item"><h4>1</h4></div>
|
|
146
|
+
<div class="item"><h4>2</h4></div>
|
|
147
|
+
<div class="item"><h4>3</h4></div>
|
|
148
|
+
<div class="item"><h4>4</h4></div>
|
|
149
|
+
<div class="item"><h4>5</h4></div>
|
|
150
|
+
<div class="item"><h4>6</h4></div>
|
|
151
|
+
<div class="item"><h4>7</h4></div>
|
|
152
|
+
<div class="item"><h4>8</h4></div>
|
|
153
|
+
<div class="item"><h4>9</h4></div>
|
|
154
|
+
<div class="item"><h4>10</h4></div>
|
|
155
|
+
<div class="item"><h4>11</h4></div>
|
|
156
|
+
<div class="item"><h4>12</h4></div>
|
|
157
|
+
</div></code></pre>
|
|
158
|
+
<script>
|
|
159
|
+
$(document).ready(function() {
|
|
160
|
+
var owl = $('.owl-carousel');
|
|
161
|
+
owl.owlCarousel({
|
|
162
|
+
margin: 10,
|
|
163
|
+
nav: true,
|
|
164
|
+
loop: true,
|
|
165
|
+
responsive: {
|
|
166
|
+
0: {
|
|
167
|
+
items: 1
|
|
168
|
+
},
|
|
169
|
+
600: {
|
|
170
|
+
items: 3
|
|
171
|
+
},
|
|
172
|
+
1000: {
|
|
173
|
+
items: 5
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
})
|
|
177
|
+
})
|
|
178
|
+
</script>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
</section>
|
|
182
|
+
|
|
183
|
+
<!-- footer -->
|
|
184
|
+
<footer class="footer">
|
|
185
|
+
<div class="row">
|
|
186
|
+
<div class="large-12 columns">
|
|
187
|
+
<h5>
|
|
188
|
+
<a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
|
|
189
|
+
<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>
|
|
190
|
+
</h5>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
</footer>
|
|
194
|
+
|
|
195
|
+
<!-- vendors -->
|
|
196
|
+
<script src="../assets/vendors/highlight.js"></script>
|
|
197
|
+
<script src="../assets/js/app.js"></script>
|
|
198
|
+
</body>
|
|
199
|
+
</html>
|