Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oddbird/slide-deck
Web presentations, as a self-contained web component
https://github.com/oddbird/slide-deck
Last synced: 8 days ago
JSON representation
Web presentations, as a self-contained web component
- Host: GitHub
- URL: https://github.com/oddbird/slide-deck
- Owner: oddbird
- License: mit
- Created: 2023-12-22T16:23:54.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-05-30T16:22:43.000Z (6 months ago)
- Last Synced: 2024-10-29T18:48:53.536Z (16 days ago)
- Language: JavaScript
- Size: 177 KB
- Stars: 25
- Watchers: 3
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# `slide-deck`
A Web Component for web presentations.
**[Demo](https://slide-deck.netlify.app)**
**⚠️ This is a pre-release**:
Breaking changes will be allowed in minor versions
until we achieve a stable v1.0 release
## Examples
General usage example:
```html
This is a slide show
Each child is a slide
We can add our own controls
Based on event handlers
previous
next
Or specifically for changing views
grid
list
```
Define a simple fallback view:
```html
slide-deck:not(:defined) {
display: grid;
> * {
border-block-end: thin solid;
}
}
```
Set initial state with attributes,
or define your own view:
```html
Listening for arrow keys
And using a fancy view
slide-deck[slide-view="fancy"] {
outline: 1px solid red;
}
```
## Features
This Web Component allows you to:
- Create web-based slides
- Switch between different slide views
- Control presentations with a remote, or a keyboard
- Follow along in a second tab (speaker view)
- Toggle full-screen mode
## Keyboard Shortcuts
Always available:
- `command-k`: Toggle control panel
- `command-shift-enter`: Start presentation (from first slide)
- `command-enter`: Resume presentation (from active slide)
- `alt-enter`: Join presentation in speaker view (from active slide)
*Windows and Linux users can use Ctrl instead of Command.*
When presenting (`key-control` is active):
- `N`/`rightArrow`/`downArrow`/`pageDown`: Next slide
- `P`/`leftArrow`/`upArrow`/`pageUp`: Previous slide
- `home`: First slide
- `end`: Last slide
- `W`/`,`: Toggle white screen
- `B`/`.`: Toggle black screen
- `escape`: Blur focused element or close control panel
These are based on
the [PowerPoint shortcuts](https://support.microsoft.com/en-us/office/use-keyboard-shortcuts-to-deliver-powerpoint-presentations-1524ffce-bd2a-45f4-9a7f-f18b992b93a0#bkmk_frequent_macos).
## Installation
You have a few options (choose one of these):
1. Install via [npm](https://www.npmjs.com/package/@oddbird/slide-deck): `npm install @oddbird/slide-deck`
1. [Download the source manually from GitHub](https://github.com/oddbird/slide-deck/releases) into your project.
1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)
### Usage
Make sure you include the `` in your project (choose one of these):
```html
<!-- Host yourself -->
<link rel="stylesheet" href="slide-deck.css">
<script type="module" src="slide-deck.js">
```
```html
```
```html
```
## Credit
With thanks to the following people:
- [David Darnes](https://darn.es/) for the
[Web Component repo template](https://github.com/daviddarnes/component-template)
## Support
At OddBird,
we enjoy collaborating and contributing
as part of an open web community.
But those contributions take time and effort.
If you're interested in supporting our
open-source work,
consider becoming a
[GitHub sponsor](https://github.com/sponsors/oddbird),
or contributing to our
[Open Collective](https://opencollective.com/oddbird-open-source).
❤️ Thanks!