Simple presentation engine demo. Added active / inactive classes to hide all but one slide at a time

<!DOCTYPE html>
<html>

  <head>
    <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>
  </head>

  <body>
    <h1>Presentation demo</h1>
    <article>
      <section class="active">
        <h2>Slide 1</h2>
        <p>This is the first slide</p>
      </section>
      <section class="inactive">
        <h2>Slide 2</h2>
        <p>Second slide</p>
      </section>
      <section class="inactive">
        <h2>Slide 3</h2>
        <p>Another slide</p>
      </section>
    </article>
    <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>
    <p>To use: press right/left arrow key to go to the next/previous slide.</p>
    <p>
      Gleb Bahmutov       <a href="http://glebbahmutov.com">glebbahmutov.com</a>
    </p>
  </body>

</html>

$(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) {
      $(allSlides[currSlide])
        .removeClass('active')
        .addClass('inactive');
      $(allSlides[nextSlide])
        .removeClass('inactive')
        .addClass('active');
      currSlide = nextSlide;
    }    
    event.preventDefault();
  });
});

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

[@bahmutov](https://twitter.com/bahmutov),
[glebbahmutov.com](http://glebbahmutov.com/)