Our slider is a simple and elegant image carousel. You can also have captions that will be transitioned on their own depending on their alignment. You can also have indicators that show up on the bottom of the slider.
Note: This is also Hammer.js compatible! Try swiping with your finger to scroll through the slider.
Note: This is also Hammer.js compatible! Try swiping with your finger to scroll through the slider.
Basic
-
This is our big Tagline!
Here's our small slogan.
-
Left Aligned Caption
Here's our small slogan.
-
Right Aligned Caption
Here's our small slogan.
-
This is our big Tagline!
Here's our small slogan.
<div class="slider">
<ul class="slides">
<li>
<img src="assets/_con/images/image-1.jpg">
<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="assets/_con/images/image-2.jpeg">
<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="assets/_con/images/image-3.jpg">
<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="assets/_con/images/image-4.jpg">
<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>
