<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"> </script>
<script>
var current_slide = 0; // zero-based
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>
<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>
Content for slide one.
</div>
<div>
Content for slide two.
</div>
<div>
<img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png">
</div>
</div>
<div class="nav">
<span class="button left-button">prev</span>
<span class="button right-button">next</span>
</div>
</div>
