Super Easy jQuery Image Carousel Slider Plugin - Easy Slider

File Size: 36 KB
Views Total: 946
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.