WebSlides = Good Karma

Finally, everything you need to make HTML presentations in a beautiful way. Just the essentials. You can create your own presentation instantly. A new release (at least) every 8th day of the month — https://webslides.tv/demos.

---

Download

Simply choose a demo and customize it in minutes. Latest version: webslides.tv/webslides-latest.zip.

---

Why WebSlides?

Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content.

Features

• Navigation (horizontal and vertical sliding): touchpad, keyboard shortcuts, and swipe.
• Slide counter.
• Permalinks: go to a specific slide.
• Autoslide.
• Click to nav. Read more!
• 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).

Key Navigation

There's a handful of keys that can be used to achieve navigation within WebSlides. Here's the list:

• ←: If WebSlides is not vertical, it will go to the previous slide.
• →: If WebSlides is not vertical, it will go to the next slide.
• ↑: If WebSlides is vertical, it will go to the previous slide.
• ↓: If WebSlides is vertical, it will go to the next slide.
• Page Up: Go to the previous slide.
• Page Down: Go to the next slide.
• Space: Go to the next slide.
• Home: Go to the first slide.
• End: Go to the last slide.

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 #webslides element 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">

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/

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
• pt

License

WebSlides is licensed under the MIT License. Use it to make something cool.

Dive In!

Please check out:

• Want to get techie? Read our technical docs
• Do not miss our demos

Credits

• WebSlides was created by @jlantunez using Cactus.
• Javascript: @Belelros and @LuisSacristan.
• Based on SimpleSlides, by @JennSchiffer.