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