How to change the default display items of Materialize Carousel?

I'd like to display 6 carousel items using Materialize Javascript Carousel element (http://materializecss.com/carousel.html). The default setting is 5 items by default. And I can't find any relevant solution according to the documentation.

Any advice? Thanks!

Solution

You can simply add more items to the carousel and it should work on its own.

<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>
    <a class="carousel-item" href="#six!"><img src="http://lorempixel.com/250/250/nature/5"></a>
    <a class="carousel-item" href="#seven!"><img src="http://lorempixel.com/250/250/nature/5"></a>
</div>

and add this before closing the body tag

<script>
    $(document).ready(function(){
        $('.carousel').carousel();
    });
</script>