Slider Pro

jQuery and WordPress Plugin

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.

Downloads

The plugins are free to use, but support is not provided.

jQuery Plugin | WordPress Plugin