A modular, responsive and touch-enabled jQuery slider plugin that enables you to create elegant and professionally looking sliders.
Clone or download
Pull request Compare This branch is even with bqworks:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
examples
libs
src
.gitignore
Gruntfile.js
README.md
bower.json
package.json

README.md

Slider Pro - jQuery slider plugin

A modular, responsive and touch-enabled jQuery slider plugin that enables you to create elegant and professionally looking sliders.

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

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

2. 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="libs/js/jquery-1.11.0.min.js"></script>
<script src="dist/js/jquery.sliderPro.min.js"></script>

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

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

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.

License

The plugin is available under the MIT license.