Hugo-Webslides

Use markdown to write contents and render with WebSlides to HTML. { .text-intro }

Github

WebSlides Demos

Here’s what you can do with WebSlides.

More Examples

Note. None of these slides are currently ported to Hugo-Webslides…YET.

Configuration

You can modify WebSlides settings directly from your project config.toml. { .text-intro }

[params.webslides]
  banner = false
  slideshow = true
  vertical = false
  autoslide = false
  changeOnClick = false
  disableLoop = false
  minWheelDelta = 40
  disableNavigateOnScroll = false
  scrollWait = 450
  slideOffset = 50
  hideIndex = false

All from one markdown file

Use three dashes “-” to create a separate slide page.


Slide1

---

Slide2

content
├── home
│   ├── home1.md (weight: 1)
│   └── home2.md (weight: 2)
└── _index.md (initial page)

Or not.

You can combine and arrange files with the weight parameter in front matter, and categorize .md files into different folders.

Slide Attributes

Assign attributes to a slide by using the following notation.

---
<!-- : .class .class2 ..sub-class bg=bg-class bgimage=(frame|dark|light)|http://image-url/ bgpos=POSITION -->

<section id="section-x" class="bg-class slide current" style="">
  <span class="background-POSITION" style="background-image:url('http://image-url/')"></span>
  <span class="background frame"></span>
  <div class="class class2">
    <div class="sub-class">
      CONTENT
    </div>
  </div>
</section>

Assign class to elements

note: depreciated with the introduction of Hugo’s native block attribute

  • Headers and Paragraphs

    # <!-- : .hClass -->Header <!-- : .pClass -->Paragraph

    <h1 class="hClass">Header</h1>
<p class="pClass">Paragraph</p>

  • Lists

    <!-- : .listClass --> - list1 - list2

    <ul class="listClass">
  <li>list1</li>
  <li>list2</li>
</ul>
    { .flexblock }

Good Karma

WebSlides — HTML presentations made easy. {.text-intro} Hypertext and beauty as narrative elements.

Twitter Dribble Github

Everyone Stories

Why WebSlides?

WebSlides is really easy

Each parent <section> in the #webslides element is an individual slide. {.text-intro}

Code is clean, scalable, and well documented. It uses intuitive markup with popular naming conventions. There’s no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

WebSlides was made to inspire people.

There are excellent presentation tools out there. WebSlides is an open source solution for telling stories. Hypertext and beauty as narrative elements.

  • → Keyboard navigation

    with arrow keys.

{.flexblock .features}

  • 100% customizable

    Well documented.

  • 40+ Beautiful Components

    Covers, cards, quotes…

  • 500+SVG Icons

    Font Awesome Kit.
    {.flexblock .features}

Support

Making a beautiful HTML presentation has never been so rewarding.

Extensible

The best way to inspire with your content is to connect on a personal level:

One more thing…

Make your keynote — .bg-apple {.fadeInUp}