Horizontally Scrollable Image Carousel Plugin with jQuery

A full-width, horizontally scrollable image carousel plugin with a bottom scrollbar and a direction-aware image caption hover effect, built on top of jQuery, Html5, CSS3, Bootstrap 3, jQuery imageLoaded and more.

Features:

• Allows you to scroll through images by mouse wheel or dragging the bottom scrollbar.
• Cool image caption effect that slides in an overlay from the direction when you're moving with the mouse.

How to use it:

1. Include the required CSS files and modernizr.js in the head section of the document.

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/normalize.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/custom-scrollbar.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/css.css" rel="stylesheet" type="text/css" media="screen">
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>

2. Include the necessary javascript files at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/plugins.js" type="text/javascript"></script> 
<script src="js/carousel.js" type="text/javascript"></script> 

3. Create a horizontal image carousel. Wrap the images and image captions using Html5 figure and figcaption elements.

<div class="slider">
<div id="carousel">
<ul class="">

<li>
<figure class="category1"> <a href="#">
<div class="clearfix"> <img src="img/1.jpg" alt=""/> </div>
<figcaption>
<div>
<div>
<h5> Title 1 </h5>
<p> Category 1 </p>
<p> Content 1 </p>
</div>
</div>
</figcaption>
</a> </figure>
</li>

<li>
<figure class="category2"> <a href="#">
<div class="clearfix"> <img src="img/2.jpg" alt=""/> </div>
<figcaption>
<div>
<div>
<h5> Title 2 </h5>
<p> Category 2 </p>
<p> Content 2 </p>
</div>
</div>
</figcaption>
</a> </figure>
</li>

<li>
<figure class="category3"> <a href="#">
<div class="clearfix"> <img src="img/3.jpg" alt=""/> </div>
<figcaption>
<div>
<div>
<h5> Title 3 </h5>
<p> Category 3 </p>
<p> Content 3 </p>
</div>
</div>
</figcaption>
</a> </figure>
</li>


</ul>
</div>
</div>

---

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