Simple Responsive Content Scrolling with jQuery Scroller Plugin

Scroller is a responsive & touch-enabled jQuery slider plugin that scrolls content horizontally left or right and supports swipe events on touch-screen devices..

Basic Usage:

1. Include the required jQuery scroller stylesheet file in the head section of the page.

<link href="css/scroller.css" rel="stylesheet" type="text/css" media="screen" />

2. Create a content slider with next/prev controls.

<div class="scroller">
<div class="sleeve">
<h2>Scroller Title</h2>
<div class="content">
<ul class="controls">
<li class="previous disabled" tabindex="0">Previous</li>
<li class="next" tabindex="0">Next</li>
</ul>
<div class="thumbs">
<ul>

<li> <a href="#"> <img src="1.jpg" alt="" />
Description 1
</a> </li>

<li> <a href="#"> <img src="2.jpg" alt="" />
Description 2
</a> </li>

<li> <a href="#"> <img src="3.jpg" alt="" />
Description 3
</a> </li>
...

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

3. Include the jQuery javascript library and jQuery scroller plugin at the bottom of the page.

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

4. Include the optional javascript libraries for swipe events support.

<script src="javascript/jquery.event.swipe.js" type="text/javascript"></script> 
<script src="javascript/jquery.event.move.js" type="text/javascript"></script> 

5. Initialize the plugin.

<script type="text/javascript">
$(document).ready(function(){
new App.Scroller($('.scroller'));
});
</script>

---

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