How do I add navigation arrows for iframed revealjs presentations?

[RaymondBalise]

Description

The quarto revealjs website shows demo slides. They render with navigation controls on the right and left. How can I add those controls to my web pages that have embedded revealjs slides

<iframe class="slide-deck" src="make_a_slide_deck/"></iframe>

in make_a_slide_deck/ I have

---
format: 
  revealjs:
    slide-number: true
    chalkboard: 
      buttons: false
    preview-links: auto
    css: styles.css
---

# Section One

... words can go here ...

## Subsection

... content goes here ...

[cderv]

This should happen by default following the controls feature which is controls: auto by default. From https://quarto.org/docs/presentations/revealjs/presenting.html#navigation-options

controls : Show arrow controls for navigating through slides (defaults to auto, which will show controls when vertical slides are present or when the deck is embedded in an iframe).

This should automatically adds the controls when you host the website and the iframe is loaded for the presentation. They won't show on localhost - only when deployed.

This is implemented as a Revealjs plugin

quarto-cli/src/resources/formats/revealjs/plugins/support/support.js

Lines 21 to 35 in 1cf5ce2

	// implement controlsAudo
	function controlsAuto(deck) {
	const config = deck.getConfig();
	if (config.controlsAuto === true) {
	const iframe = window.location !== window.parent.location;
	const localhost =
	window.location.hostname === "localhost" ||
	window.location.hostname === "127.0.0.1";
	deck.configure({
	controls:
	(iframe && !localhost) ||
	(deck.hasVerticalSlides() && config.navigationMode !== "linear"),
	});
	}
	}

Hope it helps