This time I will share jQuery Plugin and tutorial about Another Responsive Image Slider Plugin For jQuery, hope it will help you in programming stack.
Yet another jQuery plugin for creating a responsive & cross-browser image slider that loops through a group of images with multiple effects and configuration options.
How to use it:
1. Include the required jQuery library and the jQuery slider plugin’s files in the page.
2 |
<script src="src/slider.js"></script> |
3 |
<link href="src/slider.css" rel="stylesheet" type="text/css"> |
2. The Html to create an image slider with controls following the markup structure like this:
01 |
<div class="slider" slider> |
02 |
<div class="slider-content"> |
03 |
<div><img src="1.jpg" alt="Picture 1"></div> |
04 |
<div><img src="2.jpg" alt="Picture 2"></div> |
05 |
<div><img src="3.jpg" alt="Picture 3"></div> |
07 |
<div class="slider-nav"> |
08 |
<div class="slider-active"></div> |
12 |
<div class="slider-prev slider-disabled">‹</div> |
13 |
<div class="slider-next">›</div> |
3. Call the plugin with all the default settings.
1 |
$(document).ready(function() { |
4. Options and defaults.
02 |
activeClass: 'slider-active', |
04 |
contentClass: 'slider-content', |
05 |
disableClass: 'slider-disabled', |
09 |
navClass: 'slider-nav', |
10 |
nextClass: 'slider-next', |
11 |
prevClass: 'slider-prev', |
5. API methods.
02 |
$(".slider").slider('start'); |
05 |
$(".slider").slider('stop'); |
08 |
$(".slider").slider('enable'); |
11 |
$(".slider").slider('disable'); |
14 |
$(".slider").slider('destroy'); |
Change log:
v0.1.1 (2016-05-27)
- Added a new method: destroy.
- Renamed the autoplay option to autoPlay.
- Rename scrollx to scrollX
- Rename scrolly to scrollY
- Improved the cycle of the fade effect.
- Stop sliding when mouse over the slider container.
- Optimized the code style.
v0.0.2 (2014-08-09)
This awesome jQuery plugin is developed by fengyuanchen. For more Advanced Usages, please check the demo page or visit the official website.
