Rslidy
-
Inspired by Slidy and Slidy2.
-
Responsive HTML5, CSS3, JavaScript (TypeScript).
-
Slides are defined in blocks
<div
class="slide">...</div> or <section>...</section>.
-
No other dependencies.
-
Lightweight.
Rslidy File Sizes
| File |
Size (Bytes) |
Minified Size (Bytes) |
Minified and Gzipped (Bytes) |
| rslidy.js |
149,083 |
84,163 |
18,069 |
| rslidy.css |
37,043 |
24,339 |
6,362 |
Overview of Rslidy's Features
-
Slide Viewer:
- Animated slide transitions.
- Overview panel.
- Table of contents panel.
- Navigable progress bar.
- All slides view.
- Help page.
-
Responsive Layout and Interactions:
- Portrait + landscape.
- Swipe, pinch, tap.
- Tilt, shake.
- Keyboard.
- Mouse pointer, mouse wheel.
Image Viewer
The image viewer is automatically attached to every image.
Pan and zoom via mouse, keyboard, or on-screen controls.
Screen capture taken from Rslidy.
Settings
- Toggle features.
- Adjust font sizes.
- Low light mode.
- Print style sheet.
- Both stored in localstorage (if available).
Accessibility
- ARIA (Accessible Rich Internet Applications) roles and properties, updated at runtime.
- Accessible HTML5 elements, such as
<nav> and <main>.
- Fully navigable with keyboard shortcuts.
- Font sizes are freely adjustable.
- Screen reader friendly. (Tested with JAWS and NVDA. Special thanks go to Christopher Kopel.)
Gesture Support
- Swipe.
- Margin tap (similar to that of e-readers).
- Tilt/Tip.
- Shake.
Tilt and tip gestures can be used for navigation (in addition to swipe and tap gestures).
Illustration made by the author using Inkscape.
Source Code Highlighting using Prism.js
Displayed code snippets:
<body>
<section id="code-example">
<h1>Source Code Highlighting!</h1>
<h2>Or through third-party tools.</h2>
</section>
</body>
Inline code snippets:
background-color: rgba(0, 0, 0, 0.9);
Including Live Code for Interactive Content
Responsive Tables
| Smartphone |
Operating System |
Display Size (inch) |
Battery (mAh) |
RAM (GB) |
Storage (GB) |
Price (USD) |
Release Date |
| Samsung Galaxy |
Android |
6.8 |
5000 |
12 |
512 |
1199 |
2025-03-15 |
| iPhone |
iOS |
6.7 |
4500 |
8 |
512 |
1399 |
2025-09-22 |
| Xiaomi |
Android |
6.7 |
4800 |
12 |
256 |
899 |
2025-02-28 |
| Oppo Find |
Android |
6.7 |
4600 |
12 |
256 |
999 |
2025-05-10 |
| Vivo |
Android |
6.8 |
4700 |
12 |
512 |
849 |
2025-07-05 |
| Realme |
Android |
6.7 |
4500 |
12 |
256 |
749 |
2025-04-18 |
| Huawei |
HarmonyOS |
6.8 |
5000 |
12 |
512 |
1099 |
2025-06-01 |
| Motorola |
Android |
6.5 |
4400 |
8 |
256 |
699 |
2025-08-12 |
| Google Pixel |
Android |
6.4 |
4350 |
8 |
256 |
799 |
2025-01-30 |
All Slides View
The all slides view arranges the slide deck into a single scrollable and searchable document.
Screen capture taken from Rslidy.
Credits
The following people have contributed to Rslidy:
- Keith Andrews
- Fabian Platzer
- Patrick Hipp
- Christopher Kopel
- Gsellmann Inge, Heider Martin, Leitner Lukas, Patel Vrutanjali Rakesh
- Angelika Droisner, Ana Korotaj
- Thomas Eibl, Michael Glatzhofer, Christoph Heidenreich, Verena Schiffer
- Markus Schofnegger
- Rok Kogovšek, Alexei Kruglov, Fernando Pulido Ruiz, Helmut Zöhrer
- Filippo Garolla, Sabine Lukas, Matthias Schlesinger, Karin Wilding
- Elias Zeitfogel, Patrick Kasper, Karina Priebernig, Clemens Meinhart
