WebSlides = Create stories with Karma
Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — https://webslides.tv/demos.
Download
Simply choose a demo and customize it in seconds. Latest version: webslides.tv/webslides-latest.zip.
What's in the download?
The download includes demos and images (devices and logos).
All content is for demo purposes only. Images are property of their respective owners.
webslides/
├── index.html
├── css/
│ ├── base.css
│ └── colors.css
│ └── svg-icons.css (optional)
├── js/
│ ├── webslides.js
│ └── svg-icons.js (optional)
└── demos/
└── images/
Features
- Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
- Slide counter.
- Permalinks: go to a specific slide.
- Autoslide.
- Click to nav.
- Simple CSS alignments. Put content wherever you want (vertical centering...)
- 40+ components: background images/videos, quotes, cards, covers...
- Flexible blocks with auto-fill and equal height.
- Fonts: Roboto, Maitree (Serif), and San Francisco.
- Vertical rhythm (use multiples of 8).
Markup
- Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.
- Each parent
<section>in the#webslideselement is an individual slide.
<article id="webslides">
<section>
<h1>Slide 1</h1>
</section>
<section class="bg-black aligncenter">
<!-- .wrap = container 1200px -->
<div class="wrap">
<h1>Slide 2</h1>
</div>
</section>
</article>
Vertical Sliding
<article id="webslides" class="vertical">
CSS Syntax (classes)
- Typography:
.text-landing,.text-data,.text-intro... - Background Colors:
.bg-primary,.bg-apple,.bg-blue... - Background Images:
.background,.background-center-bottom... - Cards:
.card-50,.card-40... - Flexible Blocks:
.flexblock.clients,.flexblock.metrics...
Extensions
You can add:
- Unsplash photos
- animate.css
- particles.js
- Animate on scroll (Useful for longform articles)
- pt
Dive In!
Credits
- WebSlides was created by @jlantunez using Cactus.
- Javascript: @Belelros and @LuisSacristan.
- Based on SimpleSlides, by @JennSchiffer.