Carousel
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.
Note:This is also touch compatible!Try swiping with your finger to scroll through the carousel.
<div class="carousel"><a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a><a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a><a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a><a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a><a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a></div>$(document).ready(function(){$('.carousel').carousel()});jQuery Plugin Options
| Option Name | Description |
|---|---|
| duration | Transition duration in milliseconds.(Default:200) |
| dist | Perspective zoom. If 0,all items are the same size.(Default:-100) |
| shift | Set the spacing of the center item.(Default:0) |
| padding | Set the padding between non center items.(Default:0) |
| fullWidth | Make the carousel a full width slider like the second example.(Default:false) |
| indicators | Set to true to show indicators.(Default:false) |
| noWrap | Don't wrap around and cycle through items. (Default: false) |
jQuery Plugin Methods
We have methods to pause, start, move to next and move to previous slide.
// 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);
// Destroy carousel
$('.carousel').carousel('destroy');
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.
Note: This is also touch compatible! Try swiping with your finger to scroll through the carousel.
<div class="carousel carousel-slider">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/800/400/food/1"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/800/400/food/2"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/800/400/food/3"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/800/400/food/4"></a>
</div>
$('.carousel.carousel-slider').carousel({fullWidth: true});
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 carousel-fixed-itemand adding your fixed content in there.
Note:This is also touch compatible!Try swiping with your finger to scroll through the carousel.
<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>$('.carousel.carousel-slider').carousel({fullWidth:true,indicators:true});