A simple jQuery slide plugin.
dist/
├── slider.js (10 KB)
└── slider.min.js ( 5 KB)
Three quick start options are available:
- Download the latest release.
- Clone the repository:
git clone https://github.com/fengyuanchen/slider.git
. - Install with NPM:
npm install @fengyuanchen/slider
.
Include files:
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/slider.js"></script>
Initialize with $.fn.slider
method.
$('#slider').slider({
activeClass: 'slider-active', // for slide nav
autoPlay: true,
contentClass: 'slider-content',
disableClass: 'slider-disabled', // for slide "prev" and "next" button
duration: 5000,
effect: 'fade',
easing: 'swing', // support "swing" and "linear", powered by jQuery
navClass: 'slider-nav',
nextClass: 'slider-next',
prevClass: 'slider-prev',
speed: 1000,
trigger: 'click' // for slide nav
});
// Set slider options
$().slider(options);
// Set the global default options
$.fn.slider.setDefaults(options);
- Type:
String
- Default:
'slider-active'
An active state class for nav items.
- Type:
Boolean
- Default:
true
Auto play the slide after initialized.
- Type:
String
- Default:
'slider-content'
The content container.
- Type:
String
- Default:
'slider-disabled'
A disable state class for previous and next button.
- Type:
Number
- Default:
5000
The duration milliseconds of each slide item.
- Type:
String
- Options:
'fade'
,'scrollX'
,'scrollY'
- Default:
'fade'
- Type:
String
- Options:
'swing'
,'linear'
- Default:
'swing'
Powered by jQuery.
- Type:
String
- Default:
'slider-nav'
The navigation container.
- Type:
String
- Default:
'slider-prev'
The previous button.
- Type:
String
- Default:
'slider-next'
The next button.
- Type:
Number
- Default:
1000
The speed of the animation.
- Type:
String
- Default:
'click'
The event for triggering slide.
Render the slider.
Start the slider.
$().slider({
autoPlay: false
}).slider('start');
stop the slider.
Enable the slider.
Disable the slider.
Destroy the slider.
If you have to use other plugin with the same namespace, just call the $.fn.slider.noConflict
method to revert to it.
<script src="other-plugin.js"></script>
<script src="slider.js"></script>
<script>
$.fn.slider.noConflict();
// Code that uses other plugin's "$().slider" can follow here.
</script>
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
- Edge (latest)
- Internet Explorer 8+
As a jQuery plugin, you also need to see the jQuery Browser Support.
Maintained under the Semantic Versioning guidelines.