<!DOCTYPE html>

    <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>

    <h1>Presentation demo</h1>
      <section class="active">
        <h2>Slide 1</h2>
        <p>This is the first slide</p>
      <section class="inactive">
        <h2>Slide 2</h2>
        <p>Second slide</p>
      <section class="inactive">
        <h2>Slide 3</h2>
        <p>Another slide</p>
    <p>Small slide-based presentation engine
      showing how to use HTML and CSS3 transitions
      to create in browser experience similar
      to PowerPoint, Prezi, etc. For full implementation, check out
            <a href="http://glebbahmutov.com/slides-now">slides-now</a>
    <p>To use: press right/left arrow key to go to the next/previous slide.</p>
      Gleb Bahmutov       <a href="http://glebbahmutov.com">glebbahmutov.com</a>

$(function () {
  var currSlide = 0;
  var allSlides = $('section');
  $(document).on('keydown', function (event) {
    var nextSlide;
    if (event.keyCode === 37) {
      console.log('prev slide');
      nextSlide = currSlide ? currSlide - 1 : currSlide;
    } else if (event.keyCode === 39) {
      console.log('next slide');
      nextSlide = currSlide < allSlides.length - 1 ? currSlide + 1 : currSlide;
    if (nextSlide !== currSlide) {
      currSlide = nextSlide;
section {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  border-radius: 5px;
  padding-left: 1em;

section.active {
  visibility: visible;
section.inactive {
  visibility: hidden;
  display: none;

# Tiny presentation demo

This demo shows how to make a slide-based
presentation engine similar to PowerPoint
using HTML5 and CSS3 transitions.

## author

Gleb Bahmutov