Responsive Rotating Image Slider Plugin For jQuery - easySlider

File Size: 29.2 KB
Views Total: 2083
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Rotating Image Slider Plugin For jQuery - easySlider

easySlider is a simple, easy-to-use and fully responsive image carousel & slider plugin for jQuery that allows to loop infinitely over items when clicking next or previous button.

How to use it:

1. Load the necessary jQuery library and jQuery easySlider plugin's script at the bottom of the html page.

<script src="//"></script>
<script src="js/easySlider.js"></script>

2. Add your own images together with the pagination and navigation controls to the slider.

<div id="slider">
  <ul class="slides clearfix">
    <li><img class="responsive" src="1.jpg"></li>
    <li><img class="responsive" src="2.jpg"></li>
    <li><img class="responsive" src="3.jpg"></li>
    <li><img class="responsive" src="4.jpg"></li>
    <li><img class="responsive" src="5.jpg"></li>
  <ul class="controls">
    <li><img src="img/prev.png" alt="previous"></li>
    <li><img src="img/next.png" alt="next"></li>
  <ul class="pagination">
    <li class="active"></li>

3. The primary CSS styles for the slider.

/* core */
#slider {
  width: 50%;
  margin: 0 auto;

/* Helpers*/
.responsive {
  width: 100%;
  height: auto;

.clearfix:after {
  content: "";
  display: table;
  clear: both;

4. Style & position the slider controls.

/* position controls */

.controls li {
  top: 50%;
  margin-top: -30px

.controls li:nth-child(1) { left: 0; }

.controls li:nth-child(2) { right: 0; }

/* style pagination */

.pagination li { background-color: #ddd; }

.pagination { background-color: #000; }

5. Active the slider with one JS call.

$(function() {
    // options here         

6. All configuration options.


  // animation speed
  slideSpeed: 500,

  // autoplay
  autoSlide: true,

  // pagination styles
  paginationSpacing: "15px",
  paginationDiameter: "12px",
  paginationPositionFromBottom: "20px",

  // CSS selectors
  controlsClass: ".controls",
  slidesClass: ".slides",
  paginationClass: ".pagination"     

Change log:


  • Add autoslide feature and refactor code.

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