Super Easy jQuery Image Carousel Slider Plugin - Easy Slider

A super easy jQuery plugin for creating an image slider that supports numeric navigation and continuous scroll like a carousel.

How to use it:

1. Load the required CSS file in your page's head section.

<link rel="stylesheet" href="dist/css/easy-slider.css">

2. Load the jQuery library and the jQuery easy slider plugin in the footer.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="dist/js/easy-slider.js"></script>

3. Insert your images into the document with plain Html markup as follows.

<div id="demo">
  <ul>
    <li><a href="#"><img src="1.jpg" alt=""></a></li>
    <li><a href="#"><img src="2.jpg" alt=""></a></li>
    <li><a href="#"><img src="3.jpg" alt=""></a></li>
    ...
  </ul>
</div>

4. Initialize the plugin with options.

$("#demo").easySlider({
auto: true, // auto rotation
continuous: true, // continuous scroll
nextId: "slider1next", // Id attribute for "next" button. 
prevId: "slider1prev" // Id attribute for "prev" button. 
});

5. All the available options.

• prevId: "prevBtn": Id attribute for "previous" button.
• prevText: "Previous": Inner text for "previous" button. 
• nextId: "nextBtn": Id attribute for "next" button. 
• nextText: "Next": Inner text for "next" button.
• controlsShow:true: By default set to true, but if set to false it will not add any controls. It can be used with auto scroll when you want to disable user interaction.
• controlsBefore:""
• controlsAfter:""
• controlsFade:true: If set to false it will disable button hiding when slider reaches the end.
• firstId: "firstBtn": Id attribute for "first" slide.
• firstText: "First": Inner text for "first" slide. 
• firstShow:false
• lastId: "lastBtn": Id attribute for "last" slide.
• lastText: "Last": Inner text for "last" slide. 
• lastShow:false
• vertical:false: Vertical sliding
• speed: 800: Animation speed in ms.
• auto:false: autoplay
• pause:2000: This option is set in milliseconds and it represent the duration of each slide when plugin is set to autoplay.
• continuous:false: continuous scroll
• numeric: false: Numeric navigation
• numericId: "controls": Id attribute for the numeric navigation.

---

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