Image slider
Here's a simple image slider written 100% in JavaScript and jQuery. In converts any div elements of class "image-slider" containing img elements into a slider like the one below. You can use your own CSS rules to give the next/prev links a nicer style and make a frame around the image. The images should all be the same size for it to work properly. The code is in our Subversion repository here.
Configuration options
There are a few configuration options which you can include in the slider element's data attributes, using the syntax shown in the usage section below. The available configuration options are as follows:
Name | Default | Description |
---|---|---|
thumbs | 0 | The pixel size of the thumbnails shown below the sliding image (0 means don't show thumbnails) |
direction | 1 | Specifies whether the images' automatically slide to the left (-1) or right (1) |
delay | 5 | The number of seconds delay until the image automatically slides to the next image |
duration | 1000 | The number of milliseconds that the transition effect takes (note that this must be less than the delay) |
Usage
In the wiki you can use image links as follows:
Here's an example of a pure HTML page which has the links to the scripts and images included:
Example
Here's a working example which has the following syntax.
CSS styles
If you want to use the same CSS as this working example, the rules are as follows. Or you can see the CSS class attributes used here to make your own rules.