menu

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>
      

Initialization


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
  });

  // Or with jQuery

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

Options

Name Type Default Description
duration Number 200 Transition duration in milliseconds.
dist Number -100 Perspective zoom. If 0, all items are the same size.
shift Number 0 Set the spacing of the center item.
padding Number 0 Set the padding between non center items.
numVisible Number 5 Set the number of visible items.
fullWidth Boolean false Make the carousel a full width slider like the second example.
indicators Boolean false Set to true to show indicators.
noWrap Boolean false Don't wrap around and cycle through items.
onCycleTo Function null Callback for when a new slide is cycled to.

Methods

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:


  var instance = M.Carousel.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.carousel').carousel('methodName');
    $('.carousel').carousel('methodName', paramName);
  */
        
.next();

Move carousel to next slide or go forward a given amount of slides.

Arguments

Integer (optional): How many times the carousel slides.


instance.next();
instance.next(3); // Move next n times.
      

.prev();

Move carousel to previous slide or go back a given amount of slides.

Arguments

Integer (optional): How many times the carousel slides.


instance.prev();
instance.prev(3); // Move previous n times.
      

.set();

Move carousel to nth slide

Arguments

Integer: Index of slide.


instance.set();
instance.set(3); // Set to nth slide.
      

.destroy();

Destroy plugin instance and teardown


instance.destroy();
      

Properties

Name Type Description
el Element The DOM element the plugin was initialized with.
options Object The options the instance was initialized with.
pressed Boolean If the carousel is being clicked or tapped.
dragged Boolean If the carousel is currently being dragged.
center Number The index of the center carousel item.

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

  var instance = M.Carousel.init({
    fullWidth: true
  });

  // Or with jQuery

  $('.carousel.carousel-slider').carousel({
    fullWidth: true
  });
        

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

  var instance = M.Carousel.init({
    fullWidth: true,
    indicators: true
  });

  // Or with jQuery

  $('.carousel.carousel-slider').carousel({
    fullWidth: true,
    indicators: true
  });