WordPress Plugin: TWPW Slider – jQuery Image Slider and Carousel

We were looking for a plugin that allowed us to create an automatic rotating slider, with a thumbnail navigation – preferably using jQuery so that the function would work on PC’s, MACs and iDevices.

Whilst we found a couple that nearly met the requirements, they weren’t quite what we wanted.  We did find an fairly awesome jQuery plugin called Ad Gallery at CoffeeScripter.com, so we decided to create a plugin using that functionality.

While we were creating the functionality, we decided to include a Carousel function as well.

The result: TWPW Slider

Slider Features:

• Shortcode to insert the slider and thumbnail gallery
• Define slider height, width, thumbnail sizes, auto start rotate and transition times and the way the images transition within the shortcode
• Customise position of the thumbnail navigation
• CSS customisation of the slider stage background
• php function to embed the slider in template files

Carousel Features:

• Shortcode to insert the carousel function
• Define image height, image width, number of images to display and whether the carousel should rotate continously within the shortcode
• php function to embed the slider in template files

Current Version:

Download Version 1.0 (right click and choose Save As)

Installation Instructions

Download zip file to your computer

Login to wp-admin and navigate to Tools -> Plugins -> Add New

Click on the Upload link

Click on the Browse button and navigate to the folder where you downloaded the plugin to

Select the file and click open, then click Install Now

Click on Activate Now and your plugin is installed.

Using TWPW Slider

To use the TWPW Slider, simply place the shortcode where you want your slider and thumbnail gallery to appear and enter the parameters you need.

Sample Usage:

[ image_rotator width="200" height="300" thumbsize="100" transition="slide-hori" autostart="4000" ]

*note: remove the spaces from between the [ ]

This gives the following result:

Using the Slider in a Sidebar Widget

[ image_rotator postid="1011" width="100" height="200" thumbsize="100" transition="slide-hori" autostart="4000" ]

* This usage will take the images from Post ID 1011 (which happens to be this page) and display the gallery slider in the sidebar. Remove the spaces from between the [ ]

Using TWPW Slider As a Carousel

[ image_carousel visible="2" width="100" height="100" circular="false" ]

*note: remove the spaces from between the [ ]

This will give the following result:

Using the Carousel in a Sidebar Widget

[ image_carousel postid="1011" visible="2" width="100" height="100" circular="false" ]

* This usage will take the images from Post ID 1011 (which happens to be this page) and display the gallery slider in the sidebar. Remove the spaces from between the [ ]

Parameters & Frequently Asked Questions

How do I use the TWPW Carousel Function?

You use this plugin by adding the shortcode [ image_carousel ] to your sites pages or posts.  There are a series of parameters that are used to ‘code’ the paypal button. (Be sure to remove the space after the “[" and before the "]” to make the code work)

The full list of supported parameters are:

postid
Default: the ID of the post or page the shortcode is embedded on will be used.

This is the id number of the post or page where the images you wish to display are uploaded to.
If postid is not used, the plugin will use the post or page the shortcode is embedded on.

width
Default: 100
The width (in px) of each image in the rotator, without the ‘px’ following.  This should be the width you want the images themselves to be, without padding or margins

height
Default: 100
The height (in px) of each image in the rotator, without the ‘px’ following.  This should be the width you want the images themselves to be, without padding or margins

visible
Default: 3
How many images do you want displayed at a time.

circular
Default: true
Once at the end of the carousel do you want to repeate the images.
Options: false  or true

postid
Default: if left out, the post or page the shortcode is embedded on.

This is the id number of the post or page where the images you wish to display are uploaded to.
If postid is not used, the plugin will use the post or page the shortcode is embedded on.

width
Default: 100
The width (in px) of each image in the rotator, without the ‘px’ following.  This should be the width you want the images themselves to be,

without padding or margins

height
Default: 100
The height (in px) of each image in the rotator, without the ‘px’ following.  This should be the width you want the images themselves to be,

without padding or margins

visible
Default: 3
How many images do you want displayed at a time.

circular
Default: true
Once at the end of the carousel do you want to repeate the images.
Options: false  or true

How do I use the TWPW Slider Function?

You use this plugin by adding the shortcode [ image_rotator ] to your sites pages or posts.  There are a series of parameters that are used to ‘code’ the paypal button. (Be sure to remove the space after the “[" and before the "]” to make the code work)

The full list of supported parameters are:

postid
Default: the ID of the post or page the shortcode is embedded on will be used.

This is the id number of the post or page where the images you wish to display are uploaded to.
If postid is not used, the plugin will use the post or page the shortcode is embedded on.

width
Default: 380
The width (in px) of the ‘stage’ for the rotator, without the ‘px’ following.  This should be the width you want the large images to be, plus an allowance for borders and padding

height
Default: 400
The height (in px) of the ‘stage’ for the rotator, without the ‘px’ following.  This should be height of the large images you wish to display.

thumbsize
Default: 80
The size of the thumbnails (in px) you want to display in your slider, without the ‘px’ following.  The plugin will automatically calculate how many thumbnails can be displayed across the width of the ‘stage’ based on this setting.  Must be set to 1 or greater.

transition
Default: slide-hori
How do you want your images to transition from one to another?
Options: slide-hori, slide-vert, resize, fade, none or false

autostart
Default: false
Do you want the images to rotate automatically?
Options: false (no autostart), a number in milliseconds to display the slide.

How do I request a new feature?

You can request a new feature to this plugin by adding a comment to this page. We won’t guarantee that all requests can be addressed, but we will add requests to the wishlist for the next version of the plugin.