Carousel using Materialize CSS

Materialize CSS is a UI component library that is created and designed by Google. It is a design language that combines the classic principles of successful design along with innovation and technology.

Features:

• Responsive front-end CSS framework.
• It is browser-independent.
• Extensible.
• It is free to use.
• Its emphasis is on different actions and components.
• Requires usage of jQuery JavaScript library.

In this article, we are going to create a 3D carousel using materialize CSS which is very interesting as well as easy to design. Materialize CSS carousel is a robust and versatile component. It is touch-enabled which makes it smooth to use on mobile. 

Syntax:

jQuery/JavaScript for initialization:

Example 1: Using the above code snippets, we can easily create our carousel by giving the source for the images and hyperlinks (if needed) for those images. Let us look at the example below.

Output:

Full-width slider: In the same manner, we can also create a full-width slider by setting the jQuery fullWidth option to true. We can also have indicators that show up at the bottom of the slider. This slider is also touched compatible.

To create this type of slider we have a class as "carousel carousel-slider" and inside this div, we place the images used to create the slider as shown below.

jQuery script will be changed as shown below.

Example 2:

Output: