https://github.com/grrowl/slideshow

most basic jquery slideshow, can apply to anything
https://github.com/grrowl/slideshow

Last synced: about 1 year ago
JSON representation

most basic jquery slideshow, can apply to anything

• Host: GitHub
• URL: https://github.com/grrowl/slideshow
• Owner: grrowl
• Created: 2012-04-18T07:51:47.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2012-06-20T06:39:42.000Z (about 14 years ago)
• Last Synced: 2025-06-05T05:30:27.421Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 102 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# slideshow

Basic jQuery slideshow. Can be applied to anything, and it will fade out the current item and show the next.

```javascript

$('#bannerImages').slideshow({

	timeout: 4500, 				/* time betweens slide transitions */

	animDuration: 400,			/* crossfade duration */

	startIndex:	0,				/* index of first slide */

	itemList: '#bannerItems',

	nextItem: 'a#bannerNext',	/* selector or element to move to "next" when clicked */

	prevItem: 'a#bannerPrev'	/* as above, but in reverse */

});

```

If itemList is set, it will append an ```
``` for each child of #bannerImages, include ```(number)``` and set the class "active" to the index matching the active banner image.


```css

ul#bannerImages {

	margin: 0; padding: 0;

	position: relative;

}

ul#bannerImages li {

	position: absolute;

	top: 0px;

	left: 0px;

}

ul#bannerItems {

	margin: 0; padding: 0;

	list-style: none;

	cursor: pointer;

}

ul#bannerItems li {

	width: 19px;

	height: 19px;

	background: url('../images/content/slider_items.png') center top no-repeat;

}

ul#bannerItems li.active {

	background-position: center bottom;	/* show the 'active' state in the spritesheet */

}

```