Código

<style>
 .carousel {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
  background-color:black;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
 }
 .items {
  width: 1200px;
  position: absolute;
 }
 .items > div {
  width: 400px;
  height: 180px;
  font-size: 20px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
 }
 .nav {
  position: absolute;
  bottom: 5px;
  right: 15px;
 }
 .button {
  cursor: pointer;
  font-weight: bold;
 }
</style>
<div class="carousel" style="display:none;">
 <div class="items">

  <div>
    Conteudo do slide um.
  </div>

  <div>
    Conteudo do slide dois.
  </div>

  <div>
    <img src="//www.google.com/intl/en_com/images/srpr/logo3w.png">
  </div>

 </div>
 <div class="nav">
  <span class="button left-button">anterior</span>
  &nbsp;&nbsp;
  <span class="button right-button">seguinte</span>
 </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script>
 var current_slide = 0; // O primeiro slide é o zero
 var slide_count = 3;
 var slide_size = 400;

 var Direction = {
  LEFT: -1,
  RIGHT: 1
 };

 /**
 * Moves to the next slide using the direction (dx) parameter.
 */
 var nextSlide = function(dx) {
  current_slide = (current_slide + slide_count + dx) % slide_count;

  // Calculate the new value for css 'left' property and animate.
  var left_offset = '-' + (current_slide * slide_size) + 'px';
  $('.items').animate({'left': left_offset}, 300);
 };

 $('.right-button').click(nextSlide.bind(null, Direction.RIGHT));
 $('.left-button').click(nextSlide.bind(null, Direction.LEFT));


 $('.carousel').show();
</script>