🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Image-Slider Responsive

Documentation

figure-slider

Figure-Slider is a jQuery responsive pictures slider plug-in distributed under GPLv2.

##DEMO

===========

##SET-UP:

###Step 1: include Include the JS file in your page.

<script src="jquery.min.js"></script> <script src="figure-slider.min.js"></script> 

###Step 2: HTML markups

Choose the class or ID (in the example below I used a class) with which you want to run this feature and set up the slideshow gallery with these HTML markups.

<div class="YOUR-CLASS" > 	<figure> 		<img src="..." /> 		<!–– you can add a figcaption as you like ––> 		<figcaption> 			a caption. 		<figcaption/> 	<figure> <div/> 

###Step 3: the function

To run this feature properly you have to run the function right before the closing body tag, or in the head section of the document. Anyhow the function must be included after the figure-slider.js file.

<script> 	$( document ).ready(function() { 		$( '.YOUR-CLASS' ).figureSlider(); 	}); </script> </body> 

===================

##Stylization

This plugin comes with no CSS stylization so you are free to stylize it as you want. You can change the <div> width, background, margins and paddings, the <figure> and <figcaption> background, margins and paddings and so on.


You May Also Like