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:
- 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.
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
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><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.
<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.
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.
The plugin is available under the MIT license.
