edslider-时尚的响应式jQuery焦点图插件
edslider是一款时尚的响应式jQuery焦点图插件。该焦点图插件支持图片、文字或混合内容,支持无限轮播效果。
JavaScript 图片展示处理
共13Star
详细介绍
edslider
jQuery Slider PLugin
How to use?
1º - Call jQuery, edSlider plugin and edSlider css
<link rel="stylesheet" href="your-css-directory/edslider.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="your-js-directory/edslider.js"></script>
2º - Init plugin
<script>
//Callback after document ready
$(document).ready(function(){
//Initiazile plugin with your preferences
$('.mySlideshow').edslider({
width:'960',
height:'400'
});
});
</script>
3º - Html structure
<ul class="mySlideshow">
<li>Yor stuff here!</li>
<li>Yor stuff here!</li>
<li>Yor stuff here!</li>
</ul>
Options
Option | Default Value | Description |
---|---|---|
width | 960 | Set width |
height | 400 | Set height |
position | 1 | Start position |
interval | 5000 | Interval time between slides (in milliseconds) |
duration | 500 | Animation Speed (in milliseconds) |
animation | true | Enable/disable animation |
paginator | true | Enable/disable paginator |
navigator | true | Enable/disable "next"/"prev" navigation buttons |
progress | true | Enable/disable progress bar |
loadImgSrc | 'images/load.gif' | Load image url |
skin | 'edslider' | Skin name |
Change Log
version 1.1
- Fixed: issue with navigation (next and prev)
- Fixed: issue setting the slider background color in css file
- Improved: now the interval is relative to the progress bar
version 1.2
- New: added an option to enable/disable fade animation
- New: added an option to set the loading image path
- Improved: validation errors
version 1.3
- Fixed: issue preloading images
version 1.4
- Improved: responsive dimensions
- Improved: preloading images
- Improved: progress bar function