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: