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. Simply choose a demo and customize it in minutes — https://webslides.tv/demos.

A new release (at least) every 8th day of the month. Version 0.1: Jan 8, 2017.

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.
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 #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">

How it works

You need to add the follow javascript to initialize the webslides object.

var slide = jQuery('#webslides').webslides();

Now you can use the slide with these functions:

// Moving to next slide
slide.nextSlide();
// Moving to previous slide
slide.previousSlide();
// Moving to a specific slide
slide.goToSlide(n);

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:

License

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

Credits

WebSlides was created by @jlantunez using Cactus.
Thanks @LuisSacristan for the javascript code :)
Based on SimpleSlides, by @JennSchiffer.

christophermoura / webslides