Features

  • Unique transition effects
  • Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
  • Valid markup
  • Flexible configuration
  • Auto slide
  • Navigation box
  • Lightweight (8kb only)
  • Linking images
  • Free to use under MIT licence
  • Fully customizable using CSS

Usage

Download jQuery, Coin Slider javascript file and CSS file and include them on your page:
Add slider content and create one div with an id and put images and image descriptions, similar to:
At the end all you have to do is to call Coin Slider:

Example

Coin Slider have a lot of options for helping you set slider as you want. If you want to have 900px wide slider, without navigation and with 5sec delay between images you'll do this:

List of all options

width: 565, // width of slider panel
height: 290, // height of slider panel
spw: 7, // squares per width
sph: 5, // squares per height
delay: 3000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: '', // random, swirl, rain, straight
navigation: true, // prev next and buttons
links : true, // show images as links 
hoverPause: true // pause on hover
  • Be careuful with spw and sph because large numbers can cause transitions problems.
  • If you don't set effect all effects will be implemented by random.
Leave a comment on Workshop.rs

- or -

Spread the word: