Posted by : Magnus Thursday 14 June 2012


Craftyslide:  tiny slideshow built on jQuery
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>

Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © Bjonk Design -