Introduction

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="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>
      

jQuery Initialization

    $(document).ready(function(){
      $('.carousel').carousel();
    });
        

jQuery Plugin Options

Option Name	Description
time_constant	Transition time. (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)
full_width	Make the carousel a full width slider like the second example. (Default: false)
indicators	Set to true to show indicators. (Default: false)
no_wrap	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);
      

Full Width Slider

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="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>
        

Special Options

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-item and 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>