- 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> |
