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

• Basic example
• Full width carousel
• Bottom thumbnails
• Video example
• Vertical thumbnails

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.