Minimal Responsive Image Slider with jQuery and CSS3 - CSS3 Gallery

Yet another lightweight jQuery & CSS3 responsive image slider/gallery that features arrows navigation, page counter, image loader and <img> alt based image descriptions.

How to use it:

1. Include the latest jQuery library and jQuery CSS gallery's javascript at the end of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/css3gallery-5.1.min.js"></script>

2. Include the required CSS file in the head section of the page.

<link rel="stylesheet" href="css/style.css">

3. Wrap the images in a container.

<div class="stage">
<ul>
<li><img src="1.jpg" alt="Description 1" /></li>
<li><img src="2.jpg" alt="Description 2" /></li>
<li><img src="3.jpg" alt="Description 3" /></li>
</ul>
</div>

4. The image description will be auto generated from alt attribute and output to the container with class of 'description'.

<div class="description"></div>

5. Create the Html for the image slider controls.

<div class="control">
<span class="counter"></span>
<span class="back">＜</span>
<span class="next">＞</span>
</div>

6. Create the Html for the image loader.

<div class="loading">
<img src="img/loader.gif" width="16" height="11" alt="" />
</div>

7. Call the plugin on the parent element.

<script>
$("#wrapper").gallery();
</script>

---

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