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>
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.
Support
Making a beautiful HTML presentation has never been so rewarding.
- Demos: Landings · Portfolios
- Docs: Components · Classes
- Tags: Dribble · Instagram {.description}
Extensible
The best way to inspire with your content is to connect on a personal level:
- Animations: Animate.css.
- Images: Unsplash.
- Videos: Pixabay. {.description}
One more thing…
Make your keynote — .bg-apple {.fadeInUp}