Responsive, Image-based Content Slider. jQuery RefineSlide

RefineSlide is a simple jQuery plugin for displaying responsive, image-based content (with shiny animations). CSS transitions are used wherever possible, which currently makes for varied performance across browsers and platforms.

Features

A few transitions to play with

Responsive down to mobile scale

CSS transition & 3D transform support

Javascript fallback fade transition

Auto-formatted, responsive thumbnails

Good browser support (IE7+)

HTML captions

Hardware acceleration on supported browsers

Free to use and abuse as you like

Simple, semantic markup

Lightweight: 12k minified (4k gzipped)

Installation Essential steps

Link CSS
Move the slider CSS file to your server and link to it in the head section of your document.

<link rel="stylesheet" href="refineslide.css" />

(This is just for the base CSS rules. You'll also want to include some styling to make the slider look good - check out the 'dark theme' stylesheet in the download as an example.)

Link JS
Move the slider JS file to your server and link to it before the closing body tag. Please note that you must include jQuery (v1.7 or later) before the slider JS file.