CODEWITHSUNDEEP
quartoreveal.js
Claudio
Claudio

Reputation: 1550

Quarto/revealjs vertical slides with sectionin

In Quarto, revealjs presentations can have sections:

---
format: revealjs
---

# Section 1

## Slide 1
Slide 1 content

## Slide 2
Slide 2 content

It is also possible to stack slides vertically, but then the horizontal slides must have the first heading level:

---
format:
    revealjs:
        navigation-mode: vertical
---

# Slide 1
Slide 1 content

## Slide 1.1
Slide 1.1 content

# Slide 2
Slide 2 content

Is there a way to have both sectioning and vertical slides? One could use a slide with only the title as section header, but the graphical result is not optimal.

EDIT: I also noticed that when using first-level heading for slides, the .scrollable option does not work on horizontal slides, but only on vertical slides. Is it possible to have both vertical slides and scrollable horizontal slides?

What I would like to have is:

---
format:
    revealjs:
        navigation-mode: vertical
---

# Section 1

## Slide 1
This is the first horizontal slide

## Slide 2
This is the second horizontal slide

### Slide 2.1
This should be a vertical slide under the second horizontal slide, but does not work

## Slide 3 {.scrollable}
This should be a scrollable slide but does not work

Upvotes: 0

Views: 778

Answers (1)

Shafee
Shafee

Reputation: 20107

There are a couple of things to note,

  • Firstly, I have used the option slide-level: 3 so that, slides are created with level 3 (###) headings and level 2 headings can be used as section and horizontal slides when navigation-mode: vertical is used.

  • Secondly, .scrollable and .smaller are slide level classes. Since I have used slide-level: 3, they won't work with two level headings (##). Instead, you can wrap the scrollable contents with pandoc divs (:::) and define a css class for that divs.

  • Lastly, I have used engine: knitr, since a css chunk is used. And quarto tries to render a document with jupyter when it sees a css code chunk at the very first. So to avoid that, use engine: knitr.

---
format:
  revealjs:
    navigation-mode: vertical
    slide-level: 3
engine: knitr
---

## section 1

## Slide 1

This is the first horizontal slide


## Slide 2

This is the second horizontal slide

### Slide 2.1

This should be a vertical slide under the second horizontal slide

### Slide 2.2

This should be a vertical slide under the second horizontal slide


## Slide 3

```{css, echo=FALSE}
.scrollable {
  overflow-y: auto;
  height: 90vh;
}
```

::: {.scrollable}

contents to be scrollable 

- Topic 2
   - Level 1
   - Level 2
   - Level 3
- Topic 3
   - Level 1
   - Level 2
   - Level 3
- Topic 4
   - Level 1
   - Level 2
   - Level 3
   
:::

Upvotes: 0

Related Questions