Carousel proof of concept

gistfile1.html

<!-- Progressively enhances a load of slides, so they can be flicked through like a carousel -->
<!-- Assumes only one .js-slide per page, and jQuery available -->
<!-- Untested! -->

<style>
.js-slide { display: none }
.js-slide:first-child { display: block }
</style>

<div class="js-slides">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<script>
var nextSlide = function nextSlide(){
  var $slides = $('.js-slides').children();
  var $visible = $slides.filter(':visible');
  $visible.hide();
  if($visible.is(':last-child')){
    $slides.filter(':first-child').show();
  } else {
    $visible.next().show();
  }
}

var previousSlide = function previousSlide(){
  var $slides = $('.js-slides').children();
  var $visible = $slides.filter(':visible');
  $visible.hide();
  if($visible.is(':first-child')){
    $slides.filter(':last-child').show();
  } else {
    $visible.prev().show();
  }
}

$(function(){
  $('<span>').text('Previous').on('click', previousSlide).insertAfter('.js-slides');
  $('<span>').text('Next').on('click', nextSlide).insertAfter('.js-slides');
});
</script>