by bqworks
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.
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)
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 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)
All animations in the slider are powered by CSS3 transitions, ensuring the smoothest animations that are possible at the moment. (Examples: all)
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)
In addition to swipe/slide transitions, Slider Pro features a simple and elegant cross-fade transition between slides. (Examples: 3)
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)
By default, the slides will be arranged in a loop, allowing infinite scrolling. This can also be disabled, however. (Examples: all except 5)
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)
Slider Pro can handle mixing landscape and portrait images inside the same slider. The images will remain fully visible inside the slider.
The height of the slider can be set to adjust automatically to the full height of the currently selected slide. (Examples: 4)
Both the orientation of the slides and the orientation of the thumbnails can be set to horizontal or vertical. (Examples: 5)
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)
Allows you to specify different image sources for different screen sizes. For example, mobile devices will load smaller images. (Examples: 3)
Each image in the slider can have an alternative image source for screens with high PPI, like the Retina screens. (Examples: all)
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)
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)
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)
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.
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.
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)
All the navigation controls (i.e., arrows, bullets) are CSS-only (no graphics) which makes them very easy to customize.
The slider can be viewed in full-screen mode in all browsers that support the HTML5 Full Screen. (Examples: 3)
Slider Pro can be integrated with any lightbox script. In the examples featured above it uses the Fancybox lightbox. (Examples: 2 and 4)
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.
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.
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.
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.
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.
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.
The Slider Pro plugin uses WordPress development best practices, to ensure smooth and conflict-less integration with any WordPress theme or plugin.
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.
The plugin uses the WordPress recommended practices for preventing any unauthorized access and keeping all your data safe.
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.
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.
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.
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.
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.
In addition to all the features presented here and packed with Slider Pro for free, you have the option to further extend the functionality of the plugin with premium add-ons.
Add CSS and JavaScript code to the sliders and load it only on pages where there are published sliders. The add-on also features a syntax highlighting code editor, the capability to save, compare and restore revisions of the custom code.
Store records of your slider edits for comparison or backup purposes. Each slider stores its own list of revisions, allowing you to easily preview a revision, analyze its settings, compare it to other revisions or restore it.
A video is worth a thousand words. Find more video tutorials here.