code

Media

Media components include things that have to do with large media objects like Images, Video, Audio, etc.

Note: this page contains some errors that need to addressed

Slider

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.


  • 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="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>

Fullscreen Slider

You can easliy make this slider a fullscreen slider by adding the class fullscreen to the slider div. Here's a quick demo.

Open Demo

jQuery Initialization


                $(document).ready(function(){
                  $('.slider').slider({full_width: true});
                });

jQuery Plugin Options

Option Name Description
Indicators Set to false to hide slide indicators. (Default: True)
Height Set height of slider. (Default: 400)
Transition Set the duration of the transition animation in ms. (Default: 500)
Interval Set the duration between transitions in ms. (Default: 6000)

jQuery Plugin Methods

We have methods to pause, start, move to next and move to previous slide.


              // Pause slider
              $('.slider').slider('pause');
              // Start slider
              $('.slider').slider('start');
              // Next slide
              $('.slider').slider('next');
              // Previous slide
              $('.slider').slider('prev');