craftedpixelz / craftyslide

A tiny jQuery slideshow plugin

Craftyslide - A tiny jQuery slideshow plugin

About

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.

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>

Simply create a div which houses a ul containing your list of images (add an optional title to create captions), then include the supplied JS/CSS files. That's all there is to it!

Scripts:

<link rel="stylesheet" href="css/craftyslide.css" />
<script src="js/craftyslide.js"></script>

Basic Initialization:

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

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:

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

License

Copyright (c) 2011 Crafted Pixelz Licensed under the MIT license

craftyslide's Issues

Avoid outline overflow

Hi,

In the pagination, the outline overflows. There is a simple fix to apply to avoid that :

Simply add overflow: hidden; to #pagination li a

This occurs because of the text-indent: -10000px;

Transitions buffered

Hi,
Just installed this excellent implmentation of a slideshow. The only problem I have is that it appears that transitions are being buffered if the browser does not have the focus. When you next view the browser the images quickly flick to catch up ignoring the delay time, i.e. this obviously only occurs where pagination is false. I just checked and this affects Firefox and not IE!!!!

Thanks for any help
Mark

auto mode and pagination

Hi,

It will be nice if auto mode and pagination can work together.

Best regards,
ZPop

Pagination and automode at the same time

Plugin only accepts one way: pagination or auto slide mode. There is any way for both?
Sorry my english!

Percentage width

Is there a way to make the crafty slide a percentage width, to be used with a fluid grid?

Autoplay is broken in latest Chrome - Version 49.0.2623.110 (64-bit)

Auto moves to second slide, then stops.