Slider
A simple jQuery slide plugin.
Table of contents
Main
dist/ ├── slider.js (10 KB) └── slider.min.js ( 5 KB) Getting started
Quick start
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.
Installation
Include files:
<script src="/path/to/jquery.js"></script><!-- jQuery is required --> <script src="/path/to/slider.js"></script>Usage
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 });Options
// Set slider options $().slider(options); // Set the global default options $.fn.slider.setDefaults(options);activeClass
- Type:
String - Default:
'slider-active'
An active state class for nav items.
autoPlay
- Type:
Boolean - Default:
true
Auto play the slide after initialized.
contentClass
- Type:
String - Default:
'slider-content'
The content container.
disableClass
- Type:
String - Default:
'slider-disabled'
A disable state class for previous and next button.
duration
- Type:
Number - Default:
5000
The duration milliseconds of each slide item.
effect
- Type:
String - Options:
'fade','scrollX','scrollY' - Default:
'fade'
easing
- Type:
String - Options:
'swing','linear' - Default:
'swing'
Powered by jQuery.
navClass
- Type:
String - Default:
'slider-nav'
The navigation container.
prevClass
- Type:
String - Default:
'slider-prev'
The previous button.
nextClass
- Type:
String - Default:
'slider-next'
The next button.
speed
- Type:
Number - Default:
1000
The speed of the animation.
trigger
- Type:
String - Default:
'click'
The event for triggering slide.
Methods
render()
Render the slider.
start()
Start the slider.
$().slider({ autoPlay: false }).slider('start');stop()
stop the slider.
enable()
Enable the slider.
disable()
Disable the slider.
destroy()
Destroy the slider.
No conflict
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>Browser Support
- 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.
Versioning
Maintained under the Semantic Versioning guidelines.
License
MIT © Fengyuan Chen
