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>Output:
Leave a Reply