Slider Pro

For Elegant and Professional Sliders

example 1
example 2
example 3
example 4
example 5

Highlighted features: responsive, touch-swipe, slides loop, text thumbnails, animated layers, JavaScript breakpoints.

When you click on the thumbnails or arrows you will notice the slide transitioning only after the layers fade out. This feature is optional and the slides can transition immediately, as it happens when you swipe the slides.

Another important feature to mention is that the layers in this example won't be scaled down automatically (which would also be possible). Instead, CSS media queries are used to hide certain layers on smaller screens. This produces a better user experience when the slider is viewed on a small screen. However, it's also possible to scale the layers automatically.

The thumbnails will also become smaller and hide a portion of the text on small screen. This is achieved using the Breakpoints feature.

Highlighted features: full width, carousel layout, captions, lightbox support, responsiveness, touch-swipe, slides loop.

This example illustrates the possibility to arrange the slides in a carousel layout while also stretching the slider to the full width of the page. Even though the slider resides in a container that has a maximum width of 960px, this feature makes it possible to have a full-width (or full-window) slider without making changes to the page's layout.

Also, this example integrates the slider with the Fancybox lightbox script (you can use any lightbox script).

Highlighted features: conditional images, image thumbnails, fade effect, auto-scale layers, responsiveness, touch-enabled.

The most important feature showcased in this example is the possibility to specify different image sources for different slider sizes. For example, if the slider goes in full-screen mode, the images will change to a higher resolution version. Also, if you open the slider on a mobile device, another set of images (with lower resolution and lower file size) will load.

Other showcased features are the automatic scaling of the layers when the slider becomes smaller and the use of a fade transition instead of the default slide transition.

Highlighted features: mixed content, auto height, deep linking, video handling, lightbox support, responsive, touch-swipe, auto-scale layers.

This example demonstrates the slider's support for any content, not only images. As can be seen, it's possible to load videos, text and any other HTML content. Also, the videos will be controlled automatically, so if another slide is selected while the video is playing, the video will be stopped automatically. Also, when the video starts, the autoplay feature will be stopped.

Another demonstrated feature is deep linking. Each slide change will update the URL in the browser's navigation bar with the appropriate URL hash. Also, as demonstrated with the number links, it's possible to use links for navigating to a specific slide in the slider.

In this example the slider has an automatic height instead of a fixed one. The height is adjusted to the height of the selected slide.

Highlighted features: breakpoints, mixed thumbnail content, vertical slides, slides loop disabled, responsiveness, touch-enabled, captions.

The highlighted feature in this example is the use of 'breakpoints' to change the slider's configuration based on the window width. If the width decreases, the thumbnails change their position to the bottom of the slides, and if the width becomes even smaller, the content of the thumbnails is changed to simple text instead of both images and text.

Also, the slides are oriented vertically and the 'loop' feature is disabled.

Adaptable to any screen

Fully Responsive

Slider Pro is responsive by default. Not only the images will scale down, but the animated layers (where you can add any content) will be scaled down automatically as well. (Examples: all)

Touch-swipe

The slider's touch-swipe capabilities provides a native-like navigation experience on touch-screen devices. Swipe gestures are enabled for desktop devices as well. (Examples: all)

Breakpoints

Breakpoints are similar to CSS media queries and allow you to dynamically change the slider's settings when the screen is at a certain size. (Examples: 1 and 5)

Elegant and smooth animations

CSS3 Transitions

All animations in the slider are powered by CSS3 transitions, ensuring the smoothest animations that are possible at the moment. (Examples: all)

Animated Layers

Layers can be both animated and static and they can hold any HTML content. Also, layers can be scaled down automatically or with CSS. (Examples: 1, 3 and 4)

Fade Effect

In addition to swipe/slide transitions, Slider Pro features a simple and elegant cross-fade transition between slides. (Examples: 3)

Multiple layout options

Carousel Layout

The slider can show multiple slides in a carousel layout, by allowing you to set different sizes for the individual slide and for the whole slider. (Examples: 2)

Infinite Scrolling

By default, the slides will be arranged in a loop, allowing infinite scrolling. This can also be disabled, however. (Examples: all except 5)

Full Width and Full Window

The slider's size can be forced to fill the width or the window even when it's inside a container that would normally restrict it to expand. (Examples: 2)

Differently sized images

Slider Pro can handle mixing landscape and portrait images inside the same slider. The images will remain fully visible inside the slider.

Auto Height

The height of the slider can be set to adjust automatically to the full height of the currently selected slide. (Examples: 4)

Customizable Orientation

Both the orientation of the slides and the orientation of the thumbnails can be set to horizontal or vertical. (Examples: 5)

Optimized image loading

Lazy Loading

Enables the loading of images only when they are in a visible area, thus saving bandwidth and speeding up the initial page load. (Examples: all)

Conditional Images

Allows you to specify different image sources for different screen sizes. For example, mobile devices will load smaller images. (Examples: 3)

Retina-enabled

Each image in the slider can have an alternative image source for screens with high PPI, like the Retina screens. (Examples: all)

Various navigation possibilities

Thumbnails

Thumbnails can contain text, images or both. Also, they can be positioned at top, bottom, left or right of the slides. (Examples: 1, 3 and 5)

Keyboard Navigation

Slides can be navigated by using the keyboard arrow keys. Also, if a slide contains a link it can be activated by using the Enter key. (Examples: all)

Deep Linking

Provides the possibility to link to a specific slide in the slider from another page or from within the same page, thus making it possible to link from a slide to another slide. (Examples: 4)

Miscellaneous features

Modular architecture

The plugin's code consists of a core and several optional modules. These modules can be removed if they are not used, thus decreasing the file size.

Powerful API

Slider Pro has a powerful API that allows you to control it (i.e., navigate to a certain slide) programmatically. You can also change its configuration or update its content on runtime.

Smart Video

Videos inside the slider will be controlled automatically. For example, when a video starts playing, the autoplay stops, or, when another slide is selected, the video stops. (Examples: 4)

CSS-only controls

All the navigation controls (i.e., arrows, bullets) are CSS-only (no graphics) which makes them very easy to customize.

Full-screen

The slider can be viewed in full-screen mode in all browsers that support the HTML5 Full Screen. (Examples: 3)

Lightbox support

Slider Pro can be integrated with any lightbox script. In the examples featured above it uses the Fancybox lightbox. (Examples: 2 and 4)

Get the jQuery plugin

The jQuery version of Slider Pro is free and available under the MIT license.

You can Download or Fork this plugin on GitHub. For usage instructions please see the documentation.

If you wish to stay notified about important updates
please follow me on Twitter or star/watch the project on GitHub.

Please spread the word

Star

WordPress Plugin

Powerful, yet non-obtrusive

Dynamic Content

Easily load content from your posts (i.e., featured image, post title, excerpt, etc.), from WordPress galleries, and from Flickr. You can even combine multiple content types in the same slider.

Caching

All sliders will be automatically cached, thus making them load very fast, without causing any slowdown on your server. This is especially useful when you load content from posts, galleries or Flickr.

Automatic Updates

Easily update the Slider Pro plugin, directly from the WordPress Dashboard, just like you update most plugins. All your customizations will be preserved during updates.

Built with User Experience in mind

Clean and Intuitive UI

The plugin's UI uses the default style of WordPress and makes it extremely easy to manage slides and sliders. For example, you can easily sort slides and layers with a simple drag and drop.

Inline Help

Every important element is accompanied by inline information about how to use that respective element/feature. In some cases, the inline information also contains a video tutorial.

Admin Preview

Easily preview all your changes directly in the admin area, without having to publish or update the slider first. You can even test the responsiveness in the preview.

Carefully coded

Best Practices

The Slider Pro plugin uses WordPress development best practices, to ensure smooth and conflict-less integration with any WordPress theme or plugin.

Optimized

In addition to the caching feature mentioned before, another optimization-related feature is the loading of CSS and JavaScript files only in posts where the slider is added.

Secure

The plugin uses the WordPress recommended practices for preventing any unauthorized access and keeping all your data safe.

Use it anywhere

Load Anywhere

The slider can be inserted in posts and pages using the shortcode, in the template files using PHP code, or in any widget area using the built-in slider widget.

MultiSite

The plugin can be installed without problems in MultiSite environments. You can activate it per site or network-wide, and each site will have its own separate sliders.

Import and Export

Allows you to create backups or move sliders between installations. The examples showcased above are bundled with the plugin and you can import them into your own installation.

Easily customizable and highly extendable

Advanced Shortcodes

You can use shortcodes to override existing sliders or create new sliders from scratch (without using the admin area). You can also use this feature to dynamically generate sliders.

Action and Filter Hooks

Slider Pro has over 20 hooks (actions and filters) that allow developers to modify the slider's output or add new functionality without having to change the plugin's code.

Custom CSS and JavaScript

The plugin provides a dedicated area where you can add your own custom CSS or JavaScript.

A video is worth a thousand words

The WordPress version is available on CodeCanyon for a small fee →