jQuery Carousel

HTML

<div class="carousel" id="carousel">
    <div class="carousel-inner">
        <img src="img/1.jjpg" alt="">
        <img src="img/2.jjpg" alt="">
        <img src="img/3.jjpg" alt="">
        <img src="img/4.jjpg" alt="">
    </div>
</div>
<nav class="carousel-nav" id="carousel-nav">
    <button data-direction="prev">Prev</button>
    <button data-direction="next">Next</button>
</nav>

CSS

.carousel {
  width:400px;
  overflow:auto;
  margin:0 auto .7em;
}

.carousel,
.carousel-inner {
  height:100px;
}

.carousel img {
  width:100px;
  height:100px;
  background-color:#ccc;
  display:block;
  float:left;
  margin:0 5px;
}

.carousel-nav {
  text-align:center;
}

.carousel-nav button {
  cursor:pointer;
}

jQuery

(function($) {
    var $carousel = $('#carousel'),
        $container = $carousel.find('.carousel-inner'),
        $nav = $('#carousel-nav'),
        $img = $container.find('img'),
        totalWidth = ($img.outerWidth()+parseInt($img.css('margin-left'),10)+parseInt($img.css('margin-right'),10))*$img.length;
    $carousel.css('overflow', 'hidden'); // Singkirkan scroll bar jika JavaScript aktif
    $container.css('width', totalWidth); // Set lebar `.carousel-inner` selebar => [jumlah gambar + lebar gambar + margin kiri dan kanan gambar]
    $nav.find('button').on("click", function() {
        // Animasikan properti `scrollLeft` ke kiri/ke kanan,
        // berdasarkan nilai atribut `data-direction` pada tombol yang diklik
        var dir = $(this).data('direction');
        $carousel.stop().animate({
            scrollLeft: (dir == "next") ? "+=100px" : "-=100px"
        }, 200);
    });
})(jQuery);