The Carousel in Materialize

The carousel on your website can easily be created if you are using the Materialize CSS framework. All you require is using the carousel class in the wrapper element for carousel component and using the <a> tags with carousel-item where you also provide image source for each slide.

The carousel can be full-screen width with images only or mixed content or you may also create a carousel with smaller images that can slide by swiping in smart phones.

The following section shows the examples of using the Materialize carousel with live demos and complete code.

An example of materialize carousel

The simple carousel is created by referring the carousel class in the main container element. The carousel items are created as shown in the example code below:

materialize carousel 1

See online demo and code

The markup:

A little script for initializing the carousel:

An example of a full-width slider

Rather than creating overlapped sliding image slide, as in the above demo, you may create a full width slider with a single image displayed at a time.

For that, use the carousel-slider class along with carousel class in the div tag. In the jQuery code, use the fullWidth option with value = true as shown below:

See online demo and code

The markup:

The script:

Adding indicators in the carousel

To let the users know the current slide or allowing them moving to a specific slide directly, you may add indicators in a carousel.

For adding indicators, you may use data attribute data-indicators=”true” in the main container div element. This adds whitish circles towards the bottom of the carousel as shown below:

materialize carousel indicators

See online demo and code

The code:

The slider that moves automatically

In all above examples, the slides move by mouse drag or swiping in smartphones. In the data indicators example, the slider can also move by clicking the small circle.

For making the slider/carousel move automatically, there is no specific method or option like auto: true. However, you may use the next option and specify the time there e.g. 1000 (one second), 2000 for two seconds etc. Use the next option in the setInterval function as follows:

See online demo and code

The code for this demo:

You can see, slides are moving at an interval of 1500 milliseconds i.e. 1.5 seconds.

The demo of content slider

The following example shows creating a carousel that contains images as well as text. For adding fixed items in the carousel, use the carousel-fixed-item class in a div. Open the example page by clicking the link or image below. There, you will see three slides with images and overlay text:

materialize carousel content

See online demo and code

The Code: