"Materialize slider"
Materialize 0.98.2 Snippet by testing223

<link href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="slider"> <ul class="slides"> <li> <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image --> <div class="caption center-align"> <h3>This is our big Tagline!</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 left-align"> <h3>Left Aligned Caption</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 right-align"> <h3>Right Aligned Caption</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 --> <div class="caption center-align"> <h3>This is our big Tagline!</h3> <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> </div> </li> </ul> </div>
.slider .indicators .indicator-item { background-color: #666666; border: 3px solid #ffffff; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .slider .indicators .indicator-item.active { background-color: #ffffff; } .slider .indicators { bottom: 60px; z-index: 100; /* text-align: left; */ }
$(document).ready(function(){ $('.slider').slider(); });

Related: See More


Questions / Comments: