{"id":17037441,"url":"https://github.com/robflaherty/html-slideshow","last_synced_at":"2025-05-07T16:07:58.176Z","repository":{"id":925392,"uuid":"691640","full_name":"robflaherty/html-slideshow","owner":"robflaherty","description":"Lightweight HTML5-based slideshow ","archived":false,"fork":false,"pushed_at":"2019-10-23T07:25:48.000Z","size":495,"stargazers_count":180,"open_issues_count":3,"forks_count":40,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-01-03T07:20:38.517Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robflaherty.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2010-05-28T19:12:15.000Z","updated_at":"2024-11-17T14:15:45.000Z","dependencies_parsed_at":"2022-07-18T04:00:28.334Z","dependency_job_id":null,"html_url":"https://github.com/robflaherty/html-slideshow","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robflaherty%2Fhtml-slideshow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robflaherty%2Fhtml-slideshow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robflaherty%2Fhtml-slideshow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robflaherty%2Fhtml-slideshow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robflaherty","download_url":"https://codeload.github.com/robflaherty/html-slideshow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233352250,"owners_count":18663262,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T08:53:56.144Z","updated_at":"2025-01-10T13:34:30.312Z","avatar_url":"https://github.com/robflaherty.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML Slideshow\n## Lightweight HTML5-based slideshow\nThis 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.\n\n## Using it\nThe example slideshow contains instructions. Basically, you build your slides as HTML5 `section` elements like this:\n\n```\n\u003csection\u003e\n  \u003chgroup\u003e\n    \u003ch1\u003eHello, interwebs explorer.\u003c/h1\u003e\n    \u003ch2\u003eHow to use this thing\u003c/h2\u003e\n  \u003c/hgroup\u003e\n  \u003cp\u003ePress the right arrow, down arrow, or spacebar to advance; press the left arrow or up arrow to move backward.\u003c/p\u003e\n  \u003cp\u003eYou can also click the left and right arrows in the control bar at the top.\u003c/p\u003e\n\u003c/section\u003e\n```\n\nTo run Javascript for particular slides you can bind to the newSlide events like this: \n\n```\n$('html').bind('newSlide', function(e, id) { \n  switch(id) {\n    case 2:\n      console.log('This is the second slide.');;\n      break;\n    case 3:\n      console.log('Hello, third slide.');\n      break;\n  }\n});\n```\n## Demo\n[View the demo](http://www.ravelrumba.com/code/demos/html-slideshow/slideshow.html)\n\n## Blog post\n[Read the blog post](http://www.ravelrumba.com/blog/html5-slideshow/)\n\n## Variations\n* [MVC 3 HTML5 Slideshow Presentation Site Template](https://github.com/jgable/MVC-3-HTML5-Slideshow-Presentation-Template) (by [Jacob Gable](http://jacob4u2.posterous.com/))\n\n## Changelog\n05/07/2011 - Added swipe support for touch devices\n\n05/01/2011 - Reorganized file structure","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobflaherty%2Fhtml-slideshow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobflaherty%2Fhtml-slideshow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobflaherty%2Fhtml-slideshow/lists"}