https://github.com/bqworks/slider-pro
A modular, responsive and touch-enabled jQuery slider plugin that enables you to create elegant and professionally looking sliders.
https://github.com/bqworks/slider-pro
carousel jquery-slider-plugin layers responsive-slider slider touch-slider
Last synced: 9 days ago
JSON representation
A modular, responsive and touch-enabled jQuery slider plugin that enables you to create elegant and professionally looking sliders.
- Host: GitHub
- URL: https://github.com/bqworks/slider-pro
- Owner: bqworks
- License: mit
- Created: 2014-10-29T15:57:52.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2024-02-24T09:17:57.000Z (about 1 year ago)
- Last Synced: 2024-05-29T18:32:31.507Z (11 months ago)
- Topics: carousel, jquery-slider-plugin, layers, responsive-slider, slider, touch-slider
- Language: JavaScript
- Homepage:
- Size: 692 KB
- Stars: 876
- Watchers: 61
- Forks: 391
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/slider-pro)
[](https://github.com/bqworks/slider-pro/blob/master/LICENSE)
[](https://github.com/bqworks/slider-pro/actions/workflows/build.yml)
[](https://github.com/bqworks/slider-pro)
# [Slider Pro - jQuery slider plugin](https://bqworks.net/slider-pro/) #
A modular, responsive and touch-enabled jQuery slider plugin that enables you to create elegant and professionally looking sliders.
>The slider is also available in [Vanilla JavaScript](https://github.com/bqworks/slider-pro-js) and as a [WordPress plugin](https://wordpress.org/plugins/sliderpro/).
Main features:
* modular architecture
* responsive
* touch-swipe
* CSS3 transitions
* animated layers (and static)
* infinite scrolling
* carousel layout
* different sized images
* full width and full window support
* thumbnails
* deep linking
* lazy loading
* retina-enabled
* fade effect
* full-screen support
* CSS-only navigation controls (no graphics) for easy customization
* video support
* conditional images (different images for different screen sizes)
* JavaScript breakpoints
Check the plugin's [presentation page](https://bqworks.net/slider-pro/) for examples and more details of the available features.
## Getting started ##
### 1. Get a copy of the plugin ###
You can fork or download the plugin from GitHub, or you can install it through `npm` or `bower`.
```
$ npm install slider-pro
```
```
$ bower install slider-pro
```
### 2. Load the required files ###
Inside the page's head tag include the slider's CSS file.
```html
```
In the page's footer, just before </body>, include the required JavaScript files.
```html
```
From unpkg.com:
```html
```
### 3. Create the HTML markup ###
```html
```
The structure you see in the code above (slider-pro > sp-slides > sp-slide) as well as the class names used are required.
If you add an image to the slide and you want it to behave like a background image you need to add the `sp-image` class to it.
More about the supported content (i.e., layers, html, video) in the [Modules](docs/modules.md#modules) doc.
### 4. Instantiate the slider ###
```html
jQuery( document ).ready(function( $ ) {
$( '#my-slider' ).sliderPro();
});
```
Slider Pro has 50+ options which you can pass to the slider when you instantiate it. More about this in the [JavaScript API](docs/api.md#javascript-api) doc.
## Detailed usage instructions ##
* [JavaScript API](docs/api.md#javascript-api)
* [1. Properties](docs/api.md#1-properties)
* [2. Public Methods](docs/api.md#2-public-methods)
* [3. Callbacks](docs/api.md#3-callbacks)
* [Modules](docs/modules.md#modules)
* [1. Fade](docs/modules.md#1-fade)
* [2. Caption](docs/modules.md#2-caption)
* [3. Full Screen](docs/modules.md#3-full-screen)
* [4. Lazy Loading](docs/modules.md#4-lazy-loading)
* [5. Retina](docs/modules.md#5-retina)
* [6. Conditional Images](docs/modules.md#6-conditional-images)
* [7. Layers](docs/modules.md#7-layers)
* [8. Deep Linking](docs/modules.md#8-deep-linking)
* [9. Autoplay](docs/modules.md#9-autoplay)
* [10. Touch Swipe](docs/modules.md#10-touch-swipe)
* [11. Buttons](docs/modules.md#11-buttons)
* [12. Arrows](docs/modules.md#12-arrows)
* [13. Keyboard](docs/modules.md#13-keyboard)
* [14. Thumbnails](docs/modules.md#14-thumbnails)
* [15. Thumbnail Touch Swipe](docs/modules.md#15-thumbnail-touch-swipe)
* [16. Thumbnail Arrows](docs/modules.md#16-thumbnail-arrows)
* [17. Video](docs/modules.md#17-video)
## Support ##
If you found a bug or have a feature suggestion, please submit it in the [Issues tracker](https://github.com/bqworks/slider-pro/issues).
If you need help with implementing the slider in your project, I recommend using [Stack Overflow](https://stackoverflow.com/questions/tagged/slider-pro) instead of the Issues tracker.
## License ##
The plugin is available under the MIT license.