Materialize CSS Carousel
Materialized CSS carousel provides an easy way to make an image slider. It is also touch-enabled, which gives a smooth experience when we use it on mobile.
Note : This is also touch compatible! Try swiping with your finger to scroll through the carousel.
jQuery Script
To initialize materiliaze css carousel,use following jQuery code.
Initialization
$(document).ready(
function(){
$('.carousel').carousel();
});
Source Code
<div class="carousel grey lighten-5">
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/bird.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/lily.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/rose.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/water-lily.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/rose-flower.jpg" />
</a>
</div>
Full Width Slider
The carousel has a full-width option that makes it into a simple and elegant image carousel.
jQuery Script For Full With Carousel Initialization
To initialize materialize css full-width carousel, use following jQuery code.
Initialization
$('.carousel.carousel-slider').carousel(
{
fullWidth: true
});
Source Code
<div class="carousel carousel-slider">
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/bird.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/lily.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/rose.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/water-lily.jpg" />
</a>
<a class="carousel-item" href="#">
<img src="../code-support/images/slider/rose-flower.jpg" />
</a>
</div>
Carousel With Content
The materialized CSS supports image as well as allows us to make content carousels. You can also add fixed items such as buttons to your carousel by adding a div with the .carousel-fixed-item class and adding your fixed content in there.
To initialize materialize CSS full-width carousel with content slider, use the following jQuery code.
Initialization
$('.carousel.carousel-slider').carousel(
{
fullWidth: true,
indicators: true
});
Source Code
<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>
Web Tutorials
