Materialize CSS Demo
Materialize Code
Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <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.100.2/js/materialize.min.js"></script> </head> <body> <div class="container"> <h3>Materialize Carousel Demo</h3> <div class="carousel" id="demo-carousel"> <a class="carousel-item" href="#one!"><img src="images/banana.jpg"></a> <a class="carousel-item" href="#two!"><img src="images/mango.jpg"></a> <a class="carousel-item" href="#three!"><img src="images/strawberries.jpg"></a> <a class="carousel-item" href="#four!"><img src="images/currant.jpg"></a> <a class="carousel-item" href="#five!"><img src="images/mango.jpg"></a> </div> </div> <script> $(document).ready(function(){ $('#demo-carousel').carousel(); }); </script> </body> </html>
Materialize Carousel Demo
