vitrine/content/home/shortcodes/slide.md

+++ weight = 34 +++

Slide

Use this shortcode when you need to customize slide attributes like id, class, background color and transition.

---

{{< slide class="hello" >}}

Slide

Add the shortcode above the slide's content, below the ---.

---

{{</* slide class="hello" */>}}

## Hello, world!

---

---

{{< slide transition="zoom" transition-speed="fast" >}}

Custom slide 1

Did you notice? This slide has a fast zoom transition.

---

{{</* slide transition="zoom" transition-speed="fast" */>}}

## Custom slide 1

---

---

{{< slide background-color="#FF4081" >}}

Custom slide 2

This slide has a different background color.

---

{{</* slide background-color="#FF4081" */>}}

## Custom slide 2

---

---

{{< slide background-image="/images/alex-litvin-790876-unsplash.jpg" background-color="#000000" >}}

Custom slide 3

This slide has a background image.

---

{{</* slide background-image="/images/alex-litvin-790876-unsplash.jpg" */>}}

---

(credit Alex Litvin)

---

{{< slide id="custom-slide" >}}

💡 Tip: Setting a slide's id attribute makes it easy to link to from other parts of the presentation.

---

{{</* slide id="custom-slide" */>}}

## Custom slide

---

---

[Try the link](#custom-slide)

Try the link

---

Slide attribute possibilities from the Reveal.js docs:

• autoslide
• state
• background
• background-color
• background-image
• background-size
• background-position
• background-repeat

---

• background-video
• background-video-loop
• background-video-muted
• background-interactive
• background-iframe
• background-transition
• transition (can have different in and out transitions)
• transition-speed
• notes (can also use the note shortcode)
• timing

---

{{% section %}}

Slide templates

Store sets of common slide attributes in front matter variables and apply them to slides with the template attribute.

navigate down to learn more
🔽

---

Create templates in config.toml, _index.md or the current page's front matter. Put them under the templates key with a meaningful name:

[reveal_hugo.templates.hotpink]
class = "hotpink"
background = "#FF4081"

---

{{< slide template="hotpink" >}}

Apply the template using the template attribute of the slide shortcode:

{{</* slide template="hotpink" */>}}

# I'm a hot pink slide!

---

If a template exists in multiple configurations, it's properties will be merged. If a property is declared multiple times, the order of precedence is:

• page
• section (_index.md)
• site (config.toml)

{{% /section %}}

---

{{% section %}}

{{< slide content="home.reusable" >}}

---

{{< slide content="common.nested.reusable" >}}

{{% /section %}}

---

{{% section %}}

Slide-specific CSS

Add more variety to your presentation by applying slide-specific CSS.

navigate down to learn more
🔽

---

First, use the slide shortcode to give the slide a class:

---

{{</* slide class="side-by-side" */>}}

# 📈

# 📊

---

---

Next, use a layout extension partial like reveal-hugo/head.html to add CSS selectors:

<style>
.reveal section.side-by-side h1 {
  position: absolute;
}
.reveal section.side-by-side h1:first-of-type {
  left: 25%;
}
.reveal section.side-by-side h1:nth-of-type(2) {
  right: 25%;
}
</style>

---

{{< slide class="side-by-side" >}}

📈

📊

{{% /section %}}