Professional jQuery Content Slider Plugin - Slider Pro

File Size: 238 KB
Views Total: 42130
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Professional jQuery Content Slider Plugin - Slider Pro

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=""></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>

3. Initialize the slider by calling the function on the parent element.

jQuery(document).ready(function( $ ) {

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.

// Scrolls to the previous slide.

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

// 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).

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

// Gets the total number of slides.

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

6. More examples to learn about the awesome slider plugin.


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.