Just a short post here on something I’ve been working on recently: clickable image sliders. These are images, usually in the form of banners, that change or rotate either automatically or when a visitor clicks a button to advance, go back, or select an image/banner. Many big brand sites use image sliders to showcase product classes, new items, and promotions. I’ve never used them before, but decided to give them a go on a new site. After using them on one site, I’ve decided to add them to several of our sites. They really are a fantastic way to highlight different content, products, or promotions all on the same page. Often times your visitors will arrive on a page looking for something slightly different. Rather than having some of them click back and leave, these sliders offer a way to appeal to different needs without the user having to scroll down or search through your menus. They also make your site appear more professional.

To see an example implementation, take a look at our home page where I’ve just added 3 image slider banners. Notice the images are clickable, so visitors can go right to the content they find most appealing.

There are plenty image slider plugins for WordPress, but since I prefer to use static sites whenever possible, it was a bit of a chore to find an easy to implement solution. But I did find a really good one, and it’s extremely easy to implement. I’m using code provided by .  For the home page of this site I chose the ‘standard’ version. The only real modification I made was to remove the forward and back buttons. I prefer to have the images take up the full width of the center content area, set them to advance automatically, and allow visitors to move back and forth via the little bubbles beneath the images.

All you need to do to get the sliders up and running is copy and paste the html code on the page you’d like the slider to appear on, put necessary CSS code (again you can simply copy and paste this) in your style sheet, and reference the javascript files in the head section of your page code. I copied the js files and am hosting them myself, as I feel that’s safer than assuming they’re going to stay where they’re referenced on the slidesjs.com site.

Image sliders make sense for a great variety of sites, from info sites where you’d like to highlight useful pages or featured content, to e-commerce sites where you may want to direct a visitor to a product class or catalog for download. And although they’re typically used with images only, you can use any HTML code, so it’s no problem to have text or text + images instead.

Hopefully you’ll find them as useful as I have.  :)