Simple tour

tour.html

<!-- the slides -->
<div id="slides">
  <div class="slide">
    <!-- Content of slide #1 -->
  </div>
  <div class="slide">
    <!-- Content of slide #2 -->
  </div>
  <div class="slide">
    <!-- Content of slide #3 -->
  </div>
  <div class="slide">
    <!-- Content of slide #4 -->
  </div>
</div>

<!-- navigation buttons -->
<button id="prev">Previous</button>
<button id="next">Next</button>

tour.js

// retrieve every element of class `slide`
// (that is, the four divs)
var slides = $('.slide');

// `slides` now contains a list of four items
// now, to get the first item (first slide):
var firstSlide = slides.eq(0);

// ### Logic to show/hide slides

var currentSlide = 0;

$('#next').click(function() {
  // hide the current slide
  slides.eq(currentSlide).slideUp(1000);
  // increment `currentSlide`
  currentSlide++;
  // and show the next slide
  slides.eq(currentSlide).slideDown(1000);
});

//TODO: implement #prev