Professional jQuery Content Slider Plugin - Slider Pro

File Size: | 238 KB |
---|---|
Views Total: | 41197 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Slider Pro is a professional jQuery plugin which allows you to display a group of mixed content in a responsive and touch compatible slider.
Key Features:
- Fully responsive with custom JS breakpoint.
- Touch swipe, keyboard, and thumbnails navigation.
- Fullscreen and auto height support.
- CSS3 powered transitions.
- Infinite loop like a carousel.
- Image lazy load.
- Retina image support.
- Galley lightbox enabled.
- Automatic video handling.
- Supports mixed content, not only images.
Basic Usage:
1. Load the jQuery library and the jQuery Slider Pro plugin's stylesheet & script in the document.
<link rel="stylesheet" href="css/slider-pro.min.css" /> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/jquery.sliderPro.min.js"></script>
2. The basic markup structure.
<div id="demo" class="slider-pro"> <div class="sp-slides"> <div class="sp-slide"> <img class="sp-image" src="1.jpg"> </div> <div class="sp-slide"> <img class="sp-image" src="2.jpg"> </div> <div class="sp-slide"> <img class="sp-image" src="3.jpg"> <h3 class="sp-layer">Text layer</h3> <p class="sp-layer">Text layer</p> </div> </div> </div>
3. Initialize the slider by calling the function on the parent element.
jQuery(document).ready(function( $ ) { $('#demo').sliderPro(); });
4. The default options of the slider.
// Width of the slide width: 500, // Height of the slide height: 300, // Indicates if the slider is responsive responsive: true, // The aspect ratio of the slider (width/height) aspectRatio: -1, // The scale mode for images (cover, contain, exact and none) imageScaleMode: 'cover', // Indicates if the image will be centered centerImage: true, // Indicates if height of the slider will be adjusted to the // height of the selected slide autoHeight: false, // Indicates the initially selected slide startSlide: 0, // Indicates if the slides will be shuffled shuffle: false, // Indicates whether the slides will be arranged horizontally // or vertically. Can be set to 'horizontal' or 'vertical'. orientation: 'horizontal', // Indicates if the size of the slider will be forced to 'fullWidth' or 'fullWindow' forceSize: 'none', // Indicates if the slider will be loopable loop: true, // The distance between slides slideDistance: 10, // The duration of the slide animation slideAnimationDuration: 700, // The duration of the height animation heightAnimationDuration: 700, // Sets the size of the visible area, allowing the increase of it in order // to make more slides visible. // By default, only the selected slide will be visible. visibleSize: 'auto', // Breakpoints for allowing the slider's options to be changed // based on the size of the window. breakpoints: null, // Called when the slider is initialized init: function() {}, // Called when the slider is updates update: function() {}, // Called when the slider is resized sliderResize: function() {}, // Called when a new slide is selected gotoSlide: function() {}, // Called when the navigation to the newly selected slide is complete gotoSlideComplete: function() {}, // Called when a breakpoint is reached breakpointReach: function() {}
5. Public methods.
// Scrolls to the slide at the specified index. gotoSlide( index ) // Scrolls to the next slide. nextSlide() // Scrolls to the previous slide. previousSlide() // Gets all the data of the slide at the specified index. // Returns an object that contains all the data specified for that slide. getSlideAt( index ) // Gets the index of the selected slide. getSelectedSlide() // This is called by the plugin automatically when a property is changed. // You can call this manually in order to refresh the slider after changing its HTML markup // (i.e., adding or removing slides). update() // This is called by the plugin automatically when the slider changes its size. // You can also call it manually if you find it necessary to have the slider resize itself. resize() // Gets the total number of slides. getTotalSlides() // Adds an event listener to the slider. // More details about the use of this method will be presented in the 'Callbacks' chapter. on( eventType, callback ) // Removes an event listener from the slider. off( eventType ) // Destroys a slider by removing all the visual elements and functionality added by the plugin. // Basically, it leaves the slider in the state it was before the plugin was instantiated. destroy()
6. More examples to learn about the awesome slider plugin.
Changelog:
v1.6.0 (2021-06-15)
- JS & CSS updated
v1.5.0 (2018-10-24)
- update lazy loading to check if the selected slide is centered
v1.3.0 (2016-07-11)
- update
v1.2.5 (2016-07-01)
- add rtl support
v1.2.5 (2016-03-03)
- update
v1.2.4 (2015-11-13)
- add 'allowfullscreen' to youtube and vimeo videos
v1.2.3 (2015-10-16)
- update.
v1.2.1 (2015-03-16)
- update.
v1.2.0 (2015-01-30)
- update.
v1.1.0 (2014-12-12)
- improve retina support
v1.0.9 (2014-12-07)
- replace font icons with CSS shapes for thumbnail pointers
v1.0.8 (2014-12-03)
- fix unnecessary image swapping in Conditional Images module
v1.0.7 (2014-12-01)
- refactor CSS for the thumbnail pointer
v1.0.6 (2014-11-22)
- fix thumbnails position for the 'top' option
v1.0.5 (2014-11-19)
- fix thumbnails inheritance
v1.0.3 (2014-11-04)
- fix incorrect margin after exiting full screen
v1.0.2 (2014-11-03)
- fix dppx value from 192 to 2 in retina module
This awesome jQuery plugin is developed by bqworks. For more Advanced Usages, please check the demo page or visit the official website.