Now that sliders for WordPress and general Web Development have become rich and varied in their features and reliable in their performance, it is worthwhile reviewing how sliders can be effectively deployed in your WordPress websites.
Two Standard Usages
First, because most sliders readily handle captions and live links for each page, they are usefulttools not only capturing reader interest but also highlighting target pages of interest to readers. For travel and photography websites they serve as economical story-tellers as seen in the PicsofCanada.com phototale below:
In this slider, features of the WowSlider such as captions, Next+Previous navigation arrows, plus thumbnail navigation dots at the upper right of the slider were used. It was easy to add sound using HTML5 <audio>tags and a toggle button to Mute or Play Sound. But the big advantage was that the complete story with over twenty pictures could be told in a small space. With the slideshow and music, readers are enticed into the storyline. The mute button prevents embarrassing “sounds at work or in the library”.
The second popular use of sliders is as a header with the latest listing of your websites story posts. Sliders like Slider Pro, All-in-one banner Slider, and Royal Slider among others bring the ability to create website content sliders using the featured images from your posts automatically. Users can control what posts are shown including latest posts or tag/category filtered contents. As well all of the slider vendors bring extensive layout customization to the table.
Three “New” Uses for Sliders
Gallery or Album Page Slider – this slider is live, click on thumbnail on left to view on right
[iframe src=”http://cobourg.picsofcanada.com/sideways/cobhighlandfullshow.html” width=”100%” height=”450″]
Album of Images from Cobourg Highland Games
When showing a gallery of images, often WordPress admins want to use the full windows screen layout to display their images. First, be sure to use a slider that takes advantage of full-screen operations. The slider used here is the free jQuery-powered Sideways Album. It has been used to create a simple HTML file which displays an album of images from the Cobourg Highland Games.
Next, one can trigger the slider display with a link in your story to the HTML file showing the Album. Another way is by making a Custom Link in your WordPress menus as shown in the screen shot at the left. Both methods are easy and again save a lot of display space .
Another effective trigger method is to take a screenshot of one of the key images in the album and have the image linked to the HTML album display page. Then invite the users to click for the complete album presentation. But be sure to have a back link back to your website as seen in the upper left of the slider screenshot .
Slider as Special Visual Sitemap
[iframe src=”http://cobourg.picsofcanada.com/cobhiwow.html” width=”100%” height=”450″]
2nd live slider – click on navigation arrows or upper right thumbnails to advance slides.
What better way to provide a sitemap then with a Visual Slider whose captions point to the various key pages on your WordPress site. For example, this slider allows for links in the captions to the associated website page or post. A sitemap visual slider like this can be embedded into a Post/Page or can stand alone accessed from your custom menu as shown in the example just above. The WowSlider user here allows links on the full images.
Embedding JavaScript Sliders
[iframe src=”http://cobourg.picsofcanada.com/cobhigh2.html” width=”100%” height=”450″]
3rd live slider, click on Mute Music button in lower right to toggle music play.
It is hard to believe given the power features and generally high performance of most commercial WordPress sliders [lazy loading and better browser JavaScript execution are key here], that users would want to use “old fashioned” JavaScript sliders. But the simple fact of the matter is that most slider innovation is first done in JavaScript and later brought to WordPress plugins. Also, many JavaScript savvy developers often want to do their own home brews.
This was exactly the case in point, when a client wanted much bigger thumbnails that themselves slid across the page. And to provide such a JavaScript slider is easy.
Any JavaScript standalone slider can be embedded into your website using the Iframe plugin as seen in the code below:
[ iframe src="http://theopensourcery.ca/langp/lpull2.html" width="100%" height="480"]
This means users can incorporate JavaScript sliders not just in Posts and Pages but also Headers, Footers, Sidebar widgets and Banner ad widgets with ease.
Summary
First, if there is any doubt about slider performance this post shows 3 full page sliders running at the same time in three 800 x 450 windows panes. The sliders chosen are semi-responsive – that is the images scale down to fit the window, but the controls stay fixed in size. So the newest Image sliders have become super-powered with display features adding not just transition effects but image layer animations, slider layout templates, responsive design and touchscreen operations. And there is a huge gallery of WordPress sliders both commercial and free to choose from. But the usage of sliders has been somewhat prosaic.
This post has shown ways to incorporate the latest JavaScript sliders [many of which are free as well as innovative] or to use full page slider as gallery albums. In addition, the use of sliders as a Visual Sitemap is also promising. In short, WordPress became the CMS and Website Development system of choice when it added automatic plugin, theme, and website updates to its strong extensibility. Sliders once again beef up the already robust WordPress menus for innovative site navigation thus adding to the WordPress luster.