- Back to Home »
- Freebies , jQuery , Tutorials »
- Craftyslide: tiny slideshow built on jQuery
Posted by : Magnus
Thursday, 14 June 2012
Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin.
Craftyslide was created first and foremost as an experiment, but secondly out of frustration with many plugins being written today. I found many slideshow plugins too bloated for my needs and code supplied was often superfluous and non-semantic.
Usage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| < div id = "slideshow" > < ul > < li > < img src = "image1.jpg" title = "Lorem ipsum dolor sit amet" /> </ li > < li > < img src = "image2.jpg" title = "Lorem ipsum dolor sit amet" /> </ li > < li > < img src = "image3.jpg" title = "Lorem ipsum dolor sit amet" /> </ li > </ ul > </ div > |
Using Craftyslide on your site is easy. Simply create a div which houses a ul containing your list of images (see above). Give your images a title if you want to create captions, then include the supplied JS/CSS/Image files. That’s all there is to it!
Files to include
1
2
3
4
5
6
7
8
| <!-- CSS --> < link rel = "stylesheet" href = "css/craftyslide.css" /> <!-- jQuery Library --> <!-- Craftyslide Plugin --> < script src = "js/craftyslide.js" ></ script > |
Basic initialization
1
2
3
| < script > $("#slideshow").craftyslide(); </ script > |