webslides / webslides

Create HTML presentations in seconds —

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

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!

• Do not miss our demos.
• Want to get techie? Read our wiki:
  • FAQ
  • Core API
  • Plugin Docs
  • Plugin Development

Credits

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

webslides's Issues

Make navigation visible on mouse move

I think it will be better ux if the navigation was visible on mouse move rather than having to hover over an invisible area to make it visible

Linking to slides without new tab

It seems to be you can only link to a different slide with target set to _blank

it appends "#slide=4" for instance to the URL but you have to hit return to go there

Is there a workaround to go to a different slide within the same tab?

CSS sources

Hi @jlantunez !

Thanks for this very nice piece of software!

I was wondering if you have some CSS source to use with a pre-processor? I use sass but less could be easily ported.

Maybe, if you don't have, I could make it... I'm planning to use webslides in my next project.

See ya!

How is it different/better than reveal.js?

Hi, there!

As an avid user of Reveal.js, I was just wondering what sets apart WebSlides from reveal.js.

Video freezing going back

I have two consequential video slides. When I go back from the second one, the video in the first slide freeze.

PDF export would be awesome

At the moment, using print > save as PDF only shows the active slide.
It would be great if you could easily save your slideshow as a PDF also...

Sliding with Page up and Page down

Similar to #1 , it would be nice to use Page Up and Page Down to advance the slides. Many USB presentation auto advancers use these keystrokes to navigate. Bonus points for allowing the user to set the button(s) to advance and go back.

including particles.js

hello. could you please have demo example of included particles.js?

Allow to configure certain options

From issues like #44.

We need to be able to customise all the default times/selectors that we use.

Autoslide?

I haven't checked the library too deeply yet, but is an autoslide feature available?

What about seeing a snippet of code in a pretty way?

Reveal.js, another HTML presentation project, uses highlight.js to highlight code syntax. Is there any plan to implement this feature in webslides?

Lazy loading slides

When I tried out the "Landing" demo it needed a while to load the whole presentation. It seems the many images and maye other assets on the slides could be lazy loaded to speed up the application.

IE11 needs a refresh with F5

When watching https://webslides.tv/ in IE11 (latest with auto update) on Win7 I have to refresh every slide with F5 to view the slide.

Thank you, the software works great on FF or Chrome.

Export slides as PDF

Looks good. What if I want to share with others as a PDF? Any export facility? Thanks.

Any pointers? I can try my hand at this.

Add option to disable looping

Animation 'flashes' in Safari

In the demo page (http://webslides.tv), after each slide finishes animation, the previous slide flashes for a single frame:

Browser version: Safari 10.0.2

WordPress plugin?

Hi! I've really appreciated finding and playing with the WebSlides project for part of an upcoming project I'm helping a friend with. As part of fully integrating it within her site, though, I've been playing with the idea to just put it together in a plugin for her WordPress site, rather than as a subdomain as I was originally intending.

Would creating a plugin from the base code be something you guys would be interested in seeing? I would be really interested in trying to do it, even if just for this project, but wondered if having a plugin would be a neat way for the WebSlides project to spread to a different community? I would of course be including full attribution within the code base - I really just want to make it easier for WordPress users to integrate a WebSlides project, and maybe if there is interest I can add more of a UI to the editor later.

Pre-loading images & media?

When I go through a presentation I see that images only load when you access a slide, giving it a less than fluid presentation sometimes (and especially on bad connections) - is there a way to prefetch images and other media, so it's visible when going to the new slide?

why not markdown

It's very cool！
But I prefer to turn markdown file into webslide

Auto Slide Feature

Firstly, great project guys!

I like the new auto slide feature of why-webslides.html

After few experiments cannot seem to get slide to stop advancing when mouse over (or touch event). Is there a simple way to have slides stop advancing when mouse over or at least click?

Thanks and cheers!

Woody

Introducing WebSlides 1.0.0

Hi guys,

We've built a totally new, better .js architecture. Kudos to @Belelros. We'd love to hear your thoughts. Please read this:

• Changelog
• Technical Docs

This 1.0.0 is a solid beginning. Now it's really easy to extend WebSlides. We've officially said bye to jQuery.

All the code has been migrated from jQuery with ES5 to vanilla JavaScript with ES2015 (or ES6) and is fully modular. We hope this leads to a better environment in which WebSlides can grow better.

• Help us build the best HTML presentation framework. We're building a team: [email protected] :)
• If you only want to edit css/content: https://webslides.tv/webslides-latest.zip

Thanks! :)

Create tests

We need loads of tests.

Likely using Tape for them.

sliding with mouse scroll - request

this desperately needs possibility to slide right and left with mouse scroll wheel.

Add support for Home and End keys

To go to first and last slide.

WebSlides Roadmap

Hi,

The roadmap aims to set out when certain features will appear. Please contribute to WebSlides development :) https://github.com/jlantunez/webslides/projects/1

Scrolling on mobile advances to next slide

This appears to be true both for horizontally or vertically navigated decks.

On mobile Safari, I start to scroll down, and boom, the slide advances. Any quick workaround for this?

Performance test

CPU/Memory usage

Ensure keys that cause navigation don't act if an input is focused

As we do with Click to nav.

Allow re/pag av/pag to navigate the slides

Slide overview

This is imo one of the best features of https://shwr.me/

I have not idea how challenging it is technically for webslides.

Performing history in webslide

Dear Sir I would like to contribute to your great work by correcting the fact that when you are watching slides and you do backward/forward it only changes the index number of slide in address bar but the display remains the same slide.

Autoplay videos only on slide/section.current

WebSlides supports full-screen videos, but is not useful. We need autoplay videos only when you are watching the video. When you go to the next/prev slide, video (and sound) stops.

A new, better webslides.js architecture

Is there a way to disable scrolling to the next screen: only go to next screen on key press

I don't know if this is the right place to ask this question, so I apologize up front if I am wrong.

I love Webslides, it's easy and awesome.

My client is putting a little too much on some screens and some of our users aren't super web savvy. They are scrolling wildly, and flying around the presentation.

Is there a way to disable the scroll to next screen functionality.
Users would be able to use the arrow keys and on screen links to get around.

history, back-forward button does not fire

When you press back or forward button in the browser the slide number changes not the slides.

Mobile (only) transitions between the slides:

• CSS: Two new animations: .slideInLeft (next slide) and .slideInRight (previous slide)
• JS: When you swipe to the previous slide, .js will add section.slideInRight

Mouse scroll doesn't work in Chrome and does in Firefox

Great job, thank you!

Scrolling down 'why-webslides.html' works nicely in Firefox (latest update), but doesn't in Chrome.
Safari is a bit jumpy.

Collapsing Navigation (nav.navbar)

Is the navigation meant to collapse when viewed on a mobile device? Resizing the browser when viewing /demos/components.html#slide=8 (the navigation slide), the menu stacks rather than collapses. Not sure if this is intentional, or whether the navbar was intended to function like a mobile menu.

Otherwise, really enjoying your work!

Company logo on each slide / header

Hi,
Is there any possibility to add a global header on each slide? For the presentation I want to add logo and footer information to each slide globally.

Use the CSS for websites

Amazing framework! Beautiful, fast, feature-rich and simple.

I tried commented out the reference to webslides.js and Bingo! It's also a great CSS framework for a general website.

The only thing missing is the second level menu items. Would you treat this as a feature request :)

Syntax Highlighting

Does <pre> element provide syntax highlighting for different programming languages? could be a potential enhancement request...

Components as visual list

Hi,
I wanted to have all the components handy for a project I'm planning so I listed all sections with their visual renderings.
You can find it here:
https://github.com/tart2000/Webslides-components/
Hi, I'm not sure if you want to use it or not, but I could make a PR if you think it's useful.
Cheers

how to do an animation before going to the next slide?

How can I do an animation (like 'fade'), before going to the next slide?

Like fragments in reveal.js

Move to SCSS with Autoprefixer

In order to keep growing naturally, we want to transition to SCSS.

Things that should happen:

• Ensure we use webpack but actually exporting a CSS file without needing to import the CSS from JS. (Which is the Webpack way)
• Use autoprefixer to remove all prefixes.
• Current comments should be kept where they make sense and also in the output.
• Separate in units as smaller as possible so it's clear where to look when needing to change something or add something.

Make autoslide a plugin

Autoslide needs more logic than it currently has so it makes no sense to keep it inside the WebSlide core.

• We need to actually stop autosliding if the user focuses any focusable element

Somehow related. Should we give an option to disable looping? That is, not allowing to go to first slide from last one by triggering a next navigation and the same but with prev?

@jlantunez @displaynone

Simple js to move to navigate between slide?

Hi!
Is there a simple way to add nextSlide() or goToSlide('x') on a button to navigate between slides?
Thank you

reactify

reactify the webslides

Create releases (& changelog.md)!

https://github.com/jlantunez/webslides/releases

Not a minor release

In fact, it's a full blown 1.0 right here, it would be 0.1, if it was very very raw (i.e. just started and only has index.html with coming soon text in it)

How to lower resistance between slides?

Great library - I was wondering if there's a place in the code to lower the resistance between the slides? I've taken a look but couldn't find a place where this setting could be customized.