Simple Responsive Image Slider with jQuery and Html5 - Figure Slider

Figure Slider is a really simple jQuery plugin to create a fully responsive slider with image captions using Html5 <figure> and <figcaption> elements.

How to use it:

1. Include jQuery javascript library and the jQuery figure slider plugin at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="figure-slider.js"></script>

2. Insert the images for the slider using using Html5 <figure> and <figcaption> elements.

<section class="demo">

  <figure> <img src="http://lorempixel.com/700/450/sports" alt="picture1">
    <figcaption>
      <h2>title</h2>
      <p>Description 1.</p>
      <a href="#">click here</a> </figcaption>
  </figure>

  <figure> <img src="http://lorempixel.com/700/450/people" alt="picture2">
    <figcaption>
      <h2>title</h2>
      <p>Description 2.</p>
      <a href="#">click here</a> </figcaption>
  </figure>

  <figure> <img src="http://lorempixel.com/700/450/fashion" alt="picture3">
    <figcaption>
      <h2>title</h2>
      <p>Description 3.</p>
      <a href="#">click here</a> </figcaption>
  </figure>

  ...

</section>

3. Call the plugin on document ready.

$( document ).ready(function() {
$( '.demo' ).figureSlider();
});

4. A little CSS to style the image slider whatever you want.

.demo { border: 1px solid #c0392b; }

.demo { text-align: center }

.demo figcaption {
  background-color: #c0392b;
  color: white;
}

---

This awesome jQuery plugin is developed by dcdeiv. For more Advanced Usages, please check the demo page or visit the official website.