materialize-css

<div class="container"> <div class="row"> <div class="col s12 m9 l10">  <div id="introduction" class="scrollspy section"> <h4>Introduction</h4> <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> <p>Note: This is also touch compatible! Try swiping with your finger to scroll through the carousel.</p><br> <div class="carousel"> <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a> <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a> <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a> <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a> <a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a> </div><br> <pre><code class="language-markup"> <div class="carousel"> <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a> <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a> <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a> <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a> <a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a> </div> </code></pre> </div>  <div id="options" class="scrollspy section"> <h4>jQuery Initialization</h4> <pre><code class="language-javascript"> $(document).ready(function(){ $('.carousel').carousel(); }); </code></pre> <br> <h4>jQuery Plugin Options</h4> <table class="highlight"> <thead> <tr> <th>Option Name</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>time_constant</td> <td>Transition time. (Default: 200)</td> </tr> <tr> <td>dist</td> <td>Perspective zoom. If 0, all items are the same size. (Default: -100)</td> </tr> <tr> <td>shift</td> <td>Set the spacing of the center item. (Default: 0)</td> </tr> <tr> <td>padding</td> <td>Set the padding between non center items. (Default: 0)</td> </tr> <tr> <td>full_width</td> <td>Make the carousel a full width slider like the second example. (Default: false)</td> </tr> <tr> <td>indicators</td> <td>Set to true to show indicators. (Default: false)</td> </tr> <tr> <td>no_wrap</td> <td>Don't wrap around and cycle through items. (Default: false)</td> </tr> </tbody> </table> <br> <h4>jQuery Plugin Methods</h4> <p>We have methods to pause, start, move to next and move to previous slide.</p> <pre><code class="language-javascript col s12"> // Next slide $('.carousel').carousel('next'); $('.carousel').carousel('next', 3); // Move next n times. // Previous slide $('.carousel').carousel('prev'); $('.carousel').carousel('prev', 4); // Move prev n times. // Set to nth slide $('.carousel').carousel('set', 4); </code></pre> </div>  <div id="slider" class="scrollspy section"> <h4>Full Width Slider</h4> <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> <p>Note: This is also touch compatible! Try swiping with your finger to scroll through the carousel.</p><br> <div class="carousel carousel-slider"> <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/800/400/food/1"></a> <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/800/400/food/2"></a> <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/800/400/food/3"></a> <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/800/400/food/4"></a> </div><br> <pre><code class="language-markup"> <div class="carousel carousel-slider"> <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/800/400/food/1"></a> <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/800/400/food/2"></a> <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/800/400/food/3"></a> <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/800/400/food/4"></a> </div> </code></pre> </div>  <div id="special" class="scrollspy section"> <h4>Special Options</h4> <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> <p>Note: This is also touch compatible! Try swiping with your finger to scroll through the carousel.</p><br> <div class="carousel carousel-slider center" data-indicators="true"> <div class="carousel-fixed-item center"> <a class="btn waves-effect white grey-text darken-text-2">button</a> </div> <div class="carousel-item red white-text" href="#one!"> <h2>First Panel</h2> <p class="white-text">This is your first panel</p> </div> <div class="carousel-item amber white-text" href="#two!"> <h2>Second Panel</h2> <p class="white-text">This is your second panel</p> </div> <div class="carousel-item green white-text" href="#three!"> <h2>Third Panel</h2> <p class="white-text">This is your third panel</p> </div> <div class="carousel-item blue white-text" href="#four!"> <h2>Fourth Panel</h2> <p class="white-text">This is your fourth panel</p> </div> </div><br> <pre><code class="language-markup"> <div class="carousel carousel-slider center" data-indicators="true"> <div class="carousel-fixed-item center"> <a class="btn waves-effect white grey-text darken-text-2">button</a> </div> <div class="carousel-item red white-text" href="#one!"> <h2>First Panel</h2> <p class="white-text">This is your first panel</p> </div> <div class="carousel-item amber white-text" href="#two!"> <h2>Second Panel</h2> <p class="white-text">This is your second panel</p> </div> <div class="carousel-item green white-text" href="#three!"> <h2>Third Panel</h2> <p class="white-text">This is your third panel</p> </div> <div class="carousel-item blue white-text" href="#four!"> <h2>Fourth Panel</h2> <p class="white-text">This is your fourth panel</p> </div> </div> </code></pre> </div> </div>  <div class="col hide-on-small-only m3 l2"> <div class="toc-wrapper"> <div class="buysellads hide-on-small-only">  <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script> </div> <div style="height: 1px;"> <ul class="section table-of-contents"> <li><a href="#introduction">Introduction</a></li> <li><a href="#options">Options</a></li> <li><a href="#slider">Full Width Slider</a></li> <li><a href="#special">Special Options</a></li> </ul> </div> </div> </div> </div> </div>