# [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

Lorem ipsum dolor sit amet

consectetur adipisicing elit

``` 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 ``` 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.

	Stars	Issues	Version	Updated	Created
slick	26	2	1.12.2	9 years ago	12 years ago
slick-carousel	28,371	1,390	1.8.1	7 years ago	10 years ago
slider-pro	877	38	1.6.2	2 years ago	10 years ago
swiper	39,549	138	11.1.14	3 days ago	10 years ago

slick vs slick-carousel vs slider-pro vs swiper

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past