Materialize CSS
  Prev Page
Next Page  
Materialize Carousel
Materialize CSS carousel provides a robust and versatile way to make image slider. It is also touch enabled which a smooth experience we use on mobile.

Note : This is also touch compatible! Try swiping with your finger to scroll through the carousel.
jQuery Plugin
$(document).ready(function(){
  $('.carousel').carousel();
});
<div class="row">
    
   <div class="carousel">
    <a class="carousel-item" href="#one!"><img src="../images/carousel-small.jpg"></a>
    <a class="carousel-item" href="#two!"><img src="../images/carousel-small-2.jpg"></a>
    <a class="carousel-item" href="#three!"><img src="../images/carousel-small-3.jpg"></a>
    <a class="carousel-item" href="#four!"><img src="../images/carousel-small-4.jpg"></a>
    <a class="carousel-item" href="#five!"><img src="../images/carousel-small-5.jpg"></a>
  </div>
    
</div>

<script type="text/javascript">
	$(document).ready(function(){
	  $('.carousel').carousel();
	});
</script>
Output :
jQuery Plugin Methods

These jQuery plugin 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');
Full Width Slider

This carousel has a full width option that makes it into a simple and elegant image carousel.

$('.carousel.carousel-slider').carousel({fullWidth: true});
<div class="row">
    
  <div class="carousel carousel-slider">
    <a class="carousel-item" href="#one!"><img src="../images/carousel.jpg" class="responsive-img"></a>
    <a class="carousel-item" href="#two!"><img src="../images/carousel-2.jpg" class="responsive-img"></a>
    <a class="carousel-item" href="#three!"><img src="../images/carousel-3.jpg" class="responsive-img"></a>
  </div>
    
</div>

<script type="text/javascript">
	$(document).ready(function(){
	  $('.carousel.carousel-slider').carousel({fullWidth: true});
	});
</script>
Output :
Content Carousel

This carousel support images but also allows you to make content carousels. You can add fixed items to your carousel by adding a div with the carousel-fixed-item class and adding your fixed content in there.

$('.carousel.carousel-slider').carousel({fullWidth: true});
<div class="row">
    
  <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 Slider</h2>
      <p class="white-text">This is first slider</p>
      <div class="container">
      	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. </p>
      </div>
    </div>
    <div class="carousel-item blue white-text" href="#two!">
      <h2>Second Slider</h2>
      <p class="white-text">This is second slider</p>
      <div class="container">
      	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. </p>
      </div>
    </div>
    <div class="carousel-item purple white-text" href="#three!">
      <h2>Third Slider</h2>
      <p class="white-text">This is third slider</p>
      <div class="container">
      	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. </p>
      </div>
    </div>
  </div>
    
</div>

<script type="text/javascript">
	$(document).ready(function(){
	  $('.carousel.carousel-slider').carousel({fullWidth: true});
	});
</script>
Output :
jQuery Plugin Options
Option Name Description
duration Transition duration in milliseconds. (Default: 200)
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)
dist Perspective zoom. If 0, all items are the same size. (Default: -100)
shift Set the spacing of the center item. (Default: 0)
noWrap Don't wrap around and cycle through items. (Default: false)
  Prev Page
Next Page