Craftyslide

Usage

HTML:

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

<!-- CSS -->
<link rel="stylesheet" href="css/craftyslide.css" />

<!-- jQuery Library -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

<!-- Craftyslide Plugin -->
<script src="js/craftyslide.js"></script>

Basic initialization:

<script>
  $("#slideshow").craftyslide();
</script>

Show CSS

Show jQuery

Options

width (number)

Set a custom width for your slideshow.

height (number)

Set a custom height for your slideshow

pagination (true/false)

Select whether to display pagination or not. Setting to false hides pagination and enables auto mode.

fadetime (number)

Define the fade animation speed of slides.

delay (number)

Used during auto mode (pagination set to false). Defines the delay between each slide being shown.

Options example:

Example showing multiple options

$("#slideshow").craftyslide({
  'width': 640,
  'height': 400,
  'pagination': false,
  'fadetime': 500,
  'delay': 2500
});