Slider Pro – Responsive jQuery slider with CSS3 animations

A responsive and touch-enabled jQuery slider solution allowing you to create elegant, modern and pro-looking sliders.

How much time do you spend to find the top-notch slider when you are working on a great web project? From my personal experience, sometimes it takes too long and it can be a very frustrating to find the one that does the exact job you need.
Nowadays, slider it is not just a slider that shows some rotating images. A slider has to be so much more in terms of adaptability to the modern web practices.

Slider Pro is an excellent slider featuring modular architecture, CSS3 animations, touch-swipe, animated layers, infinite scrolling and lazy-loading. It is also retina-enabled and has a full-screen support. If you need to add a video, Slider Pro has video support. You can also take advantage of the carousel layout. The navigation controls can be easily modified as they created only with CSS. The JavaScript breakpoints also make it a great feature for every web project.

Have a look for the demos and how to use this useful plug-in.

Link the files

First you need to include the slider’s CSS files in the head tag of your document.

<link rel="stylesheet" href="dist/css/slider-pro.min.css"/>

At the bottom of the document, just before the ending body tag, include the needed JS files.

<script src="libs/js/jquery-1.11.0.min.js"></script>
<script src="dist/js/jquery.sliderPro.min.js"></script>

Create the HTML markup for the slider

<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 above structure (slider-pro > sp-slides > sp-slide) is important and required to have a properly working slider. In case you need to add an image to the slide and want to use it as a background image you need to add the sp-image class to it.

If you want to learn more about supported content such as layers, video and html, refer to the Modules document on Github.

Initiating the slider

Adding the required code will finish off implementing the slider in your web page.

<script type="text/javascript">
jQuery( document ).ready(function( $ ) {
$( '#my-slider' ).sliderPro();
});
</script>

Have a look at the demos and feel free to download SliderPro to play with it.

DEMOS Download SliderPro