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="//code.jquery.com/jquery-3.1.0.min.js"></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>
  <ul class="controls">
    <li><img src="img/prev.png" alt="previous"></li>
    <li><img src="img/next.png" alt="next"></li>
  </ul>
  <ul class="pagination">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

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 li.active { background-color: #000; }

5. Active the slider with one JS call.

$(function() {
  $("#slider").easySlider({
    // options here         
  });
});

6. All configuration options.

$("#slider").easySlider({

  // 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:

2016-10-26

• 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.