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 and as a WordPress plugin.
Main features:
Check the plugin's presentation page for examples and more details of the available features.
You can fork or download the plugin from GitHub, or you can install it through
Inside the page's head tag include the slider's CSS file.
In the page's footer, just before
From unpkg.com:
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
More about the supported content (i.e., layers, html, video) in the Modules doc.
Slider Pro has 50+ options which you can pass to the slider when you instantiate it. More about this in the JavaScript API doc.
If you need help with implementing the slider in your project, I recommend using Stack Overflow instead of the Issues tracker.
>The slider is also available in Vanilla JavaScript and as a WordPress plugin.
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 for examples and more details of the available features.
Getting started ##
- 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- Load the required files ###
Inside the page's head tag include the slider's CSS file.<link rel="stylesheet" href="dist/css/slider-pro.min.css"/>In the page's footer, just before
</body>, include the required JavaScript files.<script src="https://code.jquery.com/jquery-3.6.2.min.js"></script>
<script src="dist/js/jquery.sliderPro.min.js"></script>From unpkg.com:
<link rel="stylesheet" href="https://unpkg.com/slider-pro/dist/css/slider-pro.min.css"/>
<script type="text/javascript" src="https://unpkg.com/slider-pro/dist/js/jquery.sliderPro.min.js"></script>- Create the HTML markup ###
<div class="slider-pro" id="my-slider">
<div class="sp-slides">
<!-- Slide 1 -->
<div class="sp-slide">
<img class="sp-image" src="path/to/image1.jpg"/>
</div>
<!-- Slide 2 -->
<div class="sp-slide">
<p>Lorem ipsum dolor sit amet</p>
</div>
<!-- Slide 3 -->
<div class="sp-slide">
<h3 class="sp-layer">Lorem ipsum dolor sit amet</h3>
<p class="sp-layer">consectetur adipisicing elit</p>
</div>
</div>
</div>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 doc.
- Instantiate the slider ###
<script type="text/javascript">
jQuery( document ).ready(function( $ ) {
$( '#my-slider' ).sliderPro();
});
</script>Slider Pro has 50+ options which you can pass to the slider when you instantiate it. More about this in the JavaScript API doc.
Detailed usage instructions ##
* [1. Properties](docs/api.md#1-properties)
* [2. Public Methods](docs/api.md#2-public-methods)
* [3. Callbacks](docs/api.md#3-callbacks)* [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.If you need help with implementing the slider in your project, I recommend using Stack Overflow instead of the Issues tracker.
