This time I will share jQuery Plugin and tutorial about Responsive Rotating Image Slider Plugin For jQuery – easySlider, hope it will help you in programming stack.
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.
1 |
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script> |
2 |
<script src="js/easySlider.js"></script> |
2. Add your own images together with the pagination and navigation controls to the slider.
02 |
<ul class="slides clearfix"> |
03 |
<li><img class="responsive" src="1.jpg"></li> |
04 |
<li><img class="responsive" src="2.jpg"></li> |
05 |
<li><img class="responsive" src="3.jpg"></li> |
06 |
<li><img class="responsive" src="4.jpg"></li> |
07 |
<li><img class="responsive" src="5.jpg"></li> |
10 |
<li><img src="img/prev.png" alt="previous"></li> |
11 |
<li><img src="img/next.png" alt="next"></li> |
13 |
<ul class="pagination"> |
14 |
<li class="active"></li> |
3. The primary CSS styles for the slider.
4. Style & position the slider controls.
08 |
.controls li:nth-child(1) { left: 0; } |
10 |
.controls li:nth-child(2) { right: 0; } |
14 |
.pagination li { background-color: #ddd; } |
16 |
.pagination li.active { background-color: #000; } |
5. Active the slider with one JS call.
2 |
$("#slider").easySlider({ |
6. All configuration options.
01 |
$("#slider").easySlider({ |
10 |
paginationSpacing: "15px", |
11 |
paginationDiameter: "12px", |
12 |
paginationPositionFromBottom: "20px", |
15 |
controlsClass: ".controls", |
16 |
slidesClass: ".slides", |
17 |
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.
