UNPKG

21 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="msapplication-tap-highlight" content="no">
8 <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
9 <title>Carousel - Materialize</title>
10 <!-- Favicons-->
11 <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
12 <meta name="msapplication-TileColor" content="#FFFFFF">
13 <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
14 <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
15 <!-- Android 5 Chrome Color-->
16 <meta name="theme-color" content="#EE6E73">
17 <!-- CSS-->
18 <link href="css/prism.css" rel="stylesheet">
19 <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
20 <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
21 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
22 <script>
23 window.liveSettings = {
24 api_key: "a0b49b34b93844c38eaee15690d86413",
25 picker: "bottom-right",
26 detectlang: true,
27 dynamic: true,
28 autocollect: true
29 };
30 </script>
31 <script src="//cdn.transifex.com/live.js"></script>
32 </head>
33 <body>
34 <header>
35 <nav class="top-nav">
36 <div class="container">
37 <div class="nav-wrapper"><a class="page-title">Carousel</a></div>
38 </div>
39 </nav>
40 <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a></div>
41 <ul id="nav-mobile" class="side-nav fixed">
42 <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
43 <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
44 <li class="search">
45 <div class="search-wrapper card">
46 <input id="search"><i class="material-icons">search</i>
47 <div class="search-results"></div>
48 </div>
49 </li>
50 <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
51 <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
52 <li class="no-padding">
53 <ul class="collapsible collapsible-accordion">
54 <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
55 <div class="collapsible-body">
56 <ul>
57 <li><a href="color.html">Color</a></li>
58 <li><a href="grid.html">Grid</a></li>
59 <li><a href="helpers.html">Helpers</a></li>
60 <li><a href="media-css.html">Media</a></li>
61 <li><a href="sass.html">Sass</a></li>
62 <li><a href="shadow.html">Shadow</a></li>
63 <li><a href="table.html">Table</a></li>
64 <li><a href="css-transitions.html">Transitions</a></li>
65 <li><a href="typography.html">Typography</a></li>
66 </ul>
67 </div>
68 </li>
69 <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
70 <div class="collapsible-body">
71 <ul>
72 <li><a href="badges.html">Badges</a></li>
73 <li><a href="buttons.html">Buttons</a></li>
74 <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
75 <li><a href="cards.html">Cards</a></li>
76 <li><a href="chips.html">Chips</a></li>
77 <li><a href="collections.html">Collections</a></li>
78 <li><a href="footer.html">Footer</a></li>
79 <li><a href="forms.html">Forms</a></li>
80 <li><a href="icons.html">Icons</a></li>
81 <li><a href="navbar.html">Navbar</a></li>
82 <li><a href="pagination.html">Pagination</a></li>
83 <li><a href="preloader.html">Preloader</a></li>
84 </ul>
85 </div>
86 </li>
87 <li class="bold"><a class="collapsible-header active waves-effect waves-teal">JavaScript</a>
88 <div class="collapsible-body">
89 <ul>
90 <li class="active"><a href="carousel.html">Carousel</a></li>
91 <li><a href="collapsible.html">Collapsible</a></li>
92 <li><a href="dialogs.html">Dialogs</a></li>
93 <li><a href="dropdown.html">Dropdown</a></li>
94 <li><a href="media.html">Media</a></li>
95 <li><a href="modals.html">Modals</a></li>
96 <li><a href="parallax.html">Parallax</a></li>
97 <li><a href="pushpin.html">Pushpin</a></li>
98 <li><a href="scrollfire.html">ScrollFire</a></li>
99 <li><a href="scrollspy.html">Scrollspy</a></li>
100 <li><a href="side-nav.html">SideNav</a></li>
101 <li><a href="tabs.html">Tabs</a></li>
102 <li><a href="transitions.html">Transitions</a></li>
103 <li><a href="waves.html">Waves</a></li>
104 </ul>
105 </div>
106 </li>
107 </ul>
108 </li>
109 <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
110 <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
111 </ul>
112 </header>
113 <main><div class="container">
114 <div class="row">
115 <div class="col s12 m9 l10">
116
117 <!-- Introduction Section -->
118 <div id="introduction" class="scrollspy section">
119 <h4>Introduction</h4>
120 <p class="caption">Our Carousel is a robust and versatile component that can be an image slider, to an item carousel, to an onboarding experience. It is touch enabled making it especially smooth to use on mobile.</p>
121 <p>Note: This is also touch compatible! Try swiping with your finger to scroll through the carousel.</p><br>
122
123 <div class="carousel">
124 <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
125 <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
126 <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
127 <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
128 <a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>
129 </div><br>
130
131 <pre><code class="language-markup">
132 &lt;div class="carousel">
133 &lt;a class="carousel-item" href="#one!">&lt;img src="http://lorempixel.com/250/250/nature/1">&lt;/a>
134 &lt;a class="carousel-item" href="#two!">&lt;img src="http://lorempixel.com/250/250/nature/2">&lt;/a>
135 &lt;a class="carousel-item" href="#three!">&lt;img src="http://lorempixel.com/250/250/nature/3">&lt;/a>
136 &lt;a class="carousel-item" href="#four!">&lt;img src="http://lorempixel.com/250/250/nature/4">&lt;/a>
137 &lt;a class="carousel-item" href="#five!">&lt;img src="http://lorempixel.com/250/250/nature/5">&lt;/a>
138 &lt;/div>
139 </code></pre>
140 </div>
141
142 <!-- Options Section -->
143 <div id="options" class="scrollspy section">
144 <h4>jQuery Initialization</h4>
145 <pre><code class="language-javascript">
146 $(document).ready(function(){
147 $('.carousel').carousel();
148 });
149 </code></pre>
150 <br>
151
152 <h4>jQuery Plugin Options</h4>
153 <table class="highlight">
154 <thead>
155 <tr>
156 <th>Option Name</th>
157 <th>Description</th>
158 </tr>
159 </thead>
160
161 <tbody>
162 <tr>
163 <td>duration</td>
164 <td>Transition duration in milliseconds. (Default: 200)</td>
165 </tr>
166 <tr>
167 <td>dist</td>
168 <td>Perspective zoom. If 0, all items are the same size. (Default: -100)</td>
169 </tr>
170 <tr>
171 <td>shift</td>
172 <td>Set the spacing of the center item. (Default: 0)</td>
173 </tr>
174 <tr>
175 <td>padding</td>
176 <td>Set the padding between non center items. (Default: 0)</td>
177 </tr>
178 <tr>
179 <td>fullWidth</td>
180 <td>Make the carousel a full width slider like the second example. (Default: false)</td>
181 </tr>
182 <tr>
183 <td>indicators</td>
184 <td>Set to true to show indicators. (Default: false)</td>
185 </tr>
186 <tr>
187 <td>noWrap</td>
188 <td>Don't wrap around and cycle through items. (Default: false)</td>
189 </tr>
190 </tbody>
191 </table>
192 <br>
193
194 <h4>jQuery Plugin Methods</h4>
195 <p>We have methods to pause, start, move to next and move to previous slide.</p>
196 <pre><code class="language-javascript col s12">
197// Next slide
198$('.carousel').carousel('next');
199$('.carousel').carousel('next', 3); // Move next n times.
200// Previous slide
201$('.carousel').carousel('prev');
202$('.carousel').carousel('prev', 4); // Move prev n times.
203// Set to nth slide
204$('.carousel').carousel('set', 4);
205 </code></pre>
206 </div>
207
208 <!-- Slider Section -->
209 <div id="slider" class="scrollspy section">
210 <h4>Full Width Slider</h4>
211 <p class="caption">Our carousel has a full width option that makes it into a simple and elegant image carousel. You can also have indicators that show up on the bottom of the slider. </p>
212 <p>Note: This is also touch compatible! Try swiping with your finger to scroll through the carousel.</p><br>
213
214 <div class="carousel carousel-slider">
215 <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/800/400/food/1"></a>
216 <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/800/400/food/2"></a>
217 <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/800/400/food/3"></a>
218 <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/800/400/food/4"></a>
219 </div><br>
220
221 <pre><code class="language-markup">
222 &lt;div class="carousel carousel-slider">
223 &lt;a class="carousel-item" href="#one!">&lt;img src="http://lorempixel.com/800/400/food/1">&lt;/a>
224 &lt;a class="carousel-item" href="#two!">&lt;img src="http://lorempixel.com/800/400/food/2">&lt;/a>
225 &lt;a class="carousel-item" href="#three!">&lt;img src="http://lorempixel.com/800/400/food/3">&lt;/a>
226 &lt;a class="carousel-item" href="#four!">&lt;img src="http://lorempixel.com/800/400/food/4">&lt;/a>
227 &lt;/div>
228 </code></pre>
229
230 <pre><code class="language-javascript">
231 $('.carousel.carousel-slider').carousel({fullWidth: true});
232 </code></pre>
233 </div>
234
235 <!-- Special Options Section -->
236 <div id="special" class="scrollspy section">
237 <h4>Special Options</h4>
238 <p class="caption">The carousel doesn't only support images but also allows you to make content carousels. You can add fixed items to your carousel by adding a div with the class <code class="language-markup">carousel-fixed-item</code> and adding your fixed content in there.</p>
239 <p>Note: This is also touch compatible! Try swiping with your finger to scroll through the carousel.</p>
240 <br>
241
242 <div class="carousel carousel-slider center" data-indicators="true">
243 <div class="carousel-fixed-item center">
244 <a class="btn waves-effect white grey-text darken-text-2">button</a>
245 </div>
246 <div class="carousel-item red white-text" href="#one!">
247 <h2>First Panel</h2>
248 <p class="white-text">This is your first panel</p>
249 </div>
250 <div class="carousel-item amber white-text" href="#two!">
251 <h2>Second Panel</h2>
252 <p class="white-text">This is your second panel</p>
253 </div>
254 <div class="carousel-item green white-text" href="#three!">
255 <h2>Third Panel</h2>
256 <p class="white-text">This is your third panel</p>
257 </div>
258 <div class="carousel-item blue white-text" href="#four!">
259 <h2>Fourth Panel</h2>
260 <p class="white-text">This is your fourth panel</p>
261 </div>
262 </div><br>
263 <pre><code class="language-markup">
264 &lt;div class="carousel carousel-slider center" data-indicators="true">
265 &lt;div class="carousel-fixed-item center">
266 &lt;a class="btn waves-effect white grey-text darken-text-2">button&lt;/a>
267 &lt;/div>
268 &lt;div class="carousel-item red white-text" href="#one!">
269 &lt;h2>First Panel&lt;/h2>
270 &lt;p class="white-text">This is your first panel&lt;/p>
271 &lt;/div>
272 &lt;div class="carousel-item amber white-text" href="#two!">
273 &lt;h2>Second Panel&lt;/h2>
274 &lt;p class="white-text">This is your second panel&lt;/p>
275 &lt;/div>
276 &lt;div class="carousel-item green white-text" href="#three!">
277 &lt;h2>Third Panel&lt;/h2>
278 &lt;p class="white-text">This is your third panel&lt;/p>
279 &lt;/div>
280 &lt;div class="carousel-item blue white-text" href="#four!">
281 &lt;h2>Fourth Panel&lt;/h2>
282 &lt;p class="white-text">This is your fourth panel&lt;/p>
283 &lt;/div>
284 &lt;/div>
285 </code></pre>
286 <pre><code class="language-javascript">
287 $('.carousel.carousel-slider').carousel({fullWidth: true});
288 </code></pre>
289 </div>
290
291 </div>
292
293
294
295
296 <!-- Table of Contents -->
297 <div class="col hide-on-small-only m3 l2">
298 <div class="toc-wrapper">
299 <div class="buysellads hide-on-small-only">
300 <!-- CarbonAds Zone Code -->
301 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
302 </div>
303 <div style="height: 1px;">
304 <ul class="section table-of-contents">
305 <li><a href="#introduction">Introduction</a></li>
306 <li><a href="#options">Options</a></li>
307 <li><a href="#slider">Full Width Slider</a></li>
308 <li><a href="#special">Special Options</a></li>
309 </ul>
310 </div>
311 </div>
312 </div>
313
314 </div>
315</div>
316
317 </main> <footer class="page-footer">
318 <div class="container">
319 <div class="row">
320 <div class="col l4 s12">
321 <h5 class="white-text">Help Materialize Grow</h5>
322 <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
323 <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
324<input type="hidden" name="cmd" value="_s-xclick">
325<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
326">
327<button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now
328</button>
329</form>
330
331 </div>
332 <div class="col l4 s12">
333 <h5 class="white-text">Join the Discussion</h5>
334 <p class="grey-text text-lighten-4">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
335 <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
336 </div>
337 <div class="col l4 s12" style="overflow: hidden;">
338 <h5 class="white-text">Connect</h5>
339 <iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
340 <br>
341 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
342 <br>
343 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
344 </div>
345 </div>
346 </div>
347 <div class="footer-copyright">
348 <div class="container">
349 © 2014-2017 Materialize, All rights reserved.
350 <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
351 </div>
352 </div>
353 </footer>
354
355 <!-- Scripts-->
356 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
357 <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
358 </script>
359 <script src="js/jquery.timeago.min.js"></script>
360 <script src="js/prism.js"></script>
361 <script src="jade/lunr.min.js"></script>
362 <script src="jade/search.js"></script>
363 <script src="bin/materialize.js"></script>
364 <script src="js/init.js"></script>
365 <!-- Twitter Button -->
366 <script>!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>
367
368 <!-- Google Plus Button-->
369 <script src="https://apis.google.com/js/platform.js" async defer></script>
370
371 <!-- Google Analytics -->
372 <script>
373 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
374 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
375 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
376 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
377
378 ga('create', 'UA-56218128-1', 'auto');
379 ga('require', 'displayfeatures');
380 ga('send', 'pageview');
381 </script>
382
383 </body>
384</html>
\No newline at end of file