src/index.html

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <title>DeckDeckGo - Gamepad</title>

  <script src="/build/deckdeckgo-gamepad.js"></script>

  <link href="https://unpkg.com/@ionic/core@4.0.1/css/ionic.bundle.css" rel="stylesheet">
  <script src="https://unpkg.com/@ionic/core@4.0.1/dist/ionic.js"></script>
  <script src="https://unpkg.com/deckdeckgo@latest/dist/deckdeckgo.js"></script>

</head>
<body>

  <deckgo-gamepad></deckgo-gamepad>

  <deckgo-deck>
    <deckgo-slide-title>
      <h1 slot="title">DeckDeckGo - Gamepad</h1>
      <div slot="content">
        <h4>Use a Joy-Con to contol your presentation!</h4>
        <p>Using <code>@gamepad/core</code> and <code>deckdeckgo-gamepad</code></p>
      </div>
    </deckgo-slide-title>

    <deckgo-slide-title>
      <h1 slot="title">Toggle Fullscreen</h1>
    </deckgo-slide-title>

    <deckgo-slide-title>
      <h1 slot="title">Move Forward</h1>
    </deckgo-slide-title>

    <deckgo-slide-title>
      <h1 slot="title">Move Back</h1>
    </deckgo-slide-title>
  
    <deckgo-slide-youtube src="https://www.youtube.com/watch?v=oUOjJIfPIjw">
      <h1 slot="title">Play Videos</h1>
    </deckgo-slide-youtube>
  
    <deckgo-slide-content reveal="true">
      <h1 slot="title">Reveal Items</h1>
      <div slot="content">
        <ul>
          <li>Item One</li>
          <li>Item Two</li>
          <li>Item Three</li>
          <li>Item Four</li>
        </ul>
  
        <img tag="DeckDeckGo" data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png" style="width: 50px" />
      </div>
    </deckgo-slide-content>

    <deckgo-slide-title>
      <h1 slot="title">Skip Slides</h1>
    </deckgo-slide-title>
  </deckgo-deck>

</body>
</html>