JQuery Photo Slider

Photo Slider is a way to make your photo gallery becomes more interesting. It simplifies the process of making image gallery slider.

It's basically free without any restrictions. And, you don't need any programming language to be able to use it.

You'll need to load these files beforehand:

JQuery 1.7+
JQuery UI
JQuery Mobile / Touchwipe (optional)
*) only if you want to make Photo Slider swipe-able on mobile device

all browsers

ios browser android browser

*) IE 8+ supported

It's pretty simple to use Photo Slider. Just call photoSlider() from your ul tag.

$("ul").photoSlider({option : value});

Options which can be used when using Photo Slider shown below:

holderwidth	Set the maximum width of the slider (holder). Default 100%
width	Set the maximum width inner holder of the slider. Can be assumed as right position of slider control button Default 765px
imfocus	Set the focused images (clearly displayed images). Default 2
show	Set the overall displayed images. Default 4
interval	Set the sliding interval between image. Default 3000 ms (3 seconds)
speed	Set the focusing animation speed. Default 1000 ms (1 second)
distance	Set the distance of sliding images. One, two, or more images at once. Default 2 images
opacity	Set the opacity of the images when they're no focused. Default 0.2
imheight	Set the images' height. Default 250px
imwidth	Set the images' width. Default 374px
background	Set the background of the in-active images' (opacity setted image's) color. Default "#000000" (black)
activebg	Set the background of the active images. Might be usable when mouse-over is handled. Default #FFC800 (orange)
direction	Set the direction of the slide. Default left
spacer	Set the distance between images. Default 15 px

Here is some examples of Photo Slider's usage:

$("ul#sample1").photoSlider();

$("ul#sample1").photoSlider({
	imfocus: 1,
	background: "#FFF",
	distance: 1,
	opacity: 0.1,
	width; 350
});

Some of images related click handles aren't handled yet. Will be handled in next version.