https://github.com/robflaherty/html-slideshow
Lightweight HTML5-based slideshow
https://github.com/robflaherty/html-slideshow
Last synced: about 1 year ago
JSON representation
Lightweight HTML5-based slideshow
- Host: GitHub
- URL: https://github.com/robflaherty/html-slideshow
- Owner: robflaherty
- Created: 2010-05-28T19:12:15.000Z (about 16 years ago)
- Default Branch: master
- Last Pushed: 2019-10-23T07:25:48.000Z (over 6 years ago)
- Last Synced: 2025-01-03T07:20:38.517Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 483 KB
- Stars: 180
- Watchers: 6
- Forks: 40
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# HTML Slideshow
## Lightweight HTML5-based slideshow
This is a small app for creating slideshow presentations with HTML and CSS. It doesn't do fancy transitions and all that, but it lets you write stuff in HTML/CSS and it gets you from one slide to the next. You can also reveal content with intraslide animations (like Keynote's Builds, but without the animation effects). And, if you're a Javascripter and need to trigger scrolling T-Rexes or other dinosaur animations, you can bind to events that fire with each new slide.
## Using it
The example slideshow contains instructions. Basically, you build your slides as HTML5 `section` elements like this:
```
Hello, interwebs explorer.
How to use this thing
Press the right arrow, down arrow, or spacebar to advance; press the left arrow or up arrow to move backward.
You can also click the left and right arrows in the control bar at the top.
```
To run Javascript for particular slides you can bind to the newSlide events like this:
```
$('html').bind('newSlide', function(e, id) {
switch(id) {
case 2:
console.log('This is the second slide.');;
break;
case 3:
console.log('Hello, third slide.');
break;
}
});
```
## Demo
[View the demo](http://www.ravelrumba.com/code/demos/html-slideshow/slideshow.html)
## Blog post
[Read the blog post](http://www.ravelrumba.com/blog/html5-slideshow/)
## Variations
* [MVC 3 HTML5 Slideshow Presentation Site Template](https://github.com/jgable/MVC-3-HTML5-Slideshow-Presentation-Template) (by [Jacob Gable](http://jacob4u2.posterous.com/))
## Changelog
05/07/2011 - Added swipe support for touch devices
05/01/2011 - Reorganized file structure