Materialize CSS Carousel

by Online Tutorials Library July 14, 2022

Materialize CSS Carousel

Materialize CSS carousel provides a robust and versatile way to make image slider. It is also touch enable which gives a smooth experience when we use it on mobile.

JavaScript

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

Example

Let’s take an example to demonstrate Materialize CSS Carousel.

 <!DOCTYPE html> <html>    <head>       <title>The Materialize Cards Example</title>       <meta name = “viewport” content = “width = device-width, initial-scale = 1”>             <link rel = “stylesheet”          href=”https://fonts.googleapis.com/icon?family=Material+Icons”>       <link rel = “stylesheet”          href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>       <script type = “text/javascript”          src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>                  <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”>       </script>     </head>     <body class = “container”>       <div class=”slider”>   <ul class=”slides”>     <li>       <img src=”http://lorempixel.com/580/250/nature/1″>       <!– random image –>       <div class=”caption center-align”>         <h3>Post 1</h3>         <h5 class=”light grey-text text-lighten-3″>Here’s our small slogan.</h5>       </div>     </li>     <li>       <img src=”http://lorempixel.com/580/250/nature/2″>       <!– random image –>       <div class=”caption center-align”>         <h3>Post 2</h3>         <h5 class=”light grey-text text-lighten-3″>Here’s our small slogan.</h5>       </div>     </li>     <li>       <img src=”http://lorempixel.com/580/250/nature/3″>       <!– random image –>       <<div class=”caption center-align”>         <h3>Post 3</h3>         <h5 class=”light grey-text text-lighten-3″>Here’s our small slogan.</h5> </div> </li> <li>   <img src=”http://lorempixel.com/580/250/nature/4″>   <!– random image –>   <d<div class=”caption center-align”>     <h3>Post 4</h3>     <h5 class=”light grey-text text-lighten-3″>Here’s our small slogan.</h5>     </div> </li> </ul> </div> <script> $(document).ready(function() {   $(“.slider”).slider({ full_width: true }); }); </script>    </body>    </html> 

Test it Now

Output:

Next TopicMaterialize CSS JS Media

Materialize CSS Carousel

Materialize CSS Carousel

Example

Sticky Notes for Ubuntu

Azure Portal Overview

You may also like