A really simple carousel built without using javascript for animations… The according Javascript only needs to reassign the classes accordingly (NOTE: this code should just demonstrate how one could built such a carousel, the code itself isn't tested)

carousel.html

<!-- ... -->
<div class="carousel">
    <a class="prev" href="#">prev</a>
    <div class="slide-container">
        <div class="slide center"><!-- ... --></div>
        <div class="slide right"><!-- ... --></div>
        <div class="slide hidden"><!-- ... --></div>
        <div class="slide hidden"><!-- ... --></div>
        <div class="slide hidden"><!-- ... --></div>
        <div class="slide left"><!-- ... --></div>    
    </div>
    <a class="next" href="#">next</a>
</div>
<!-- ... -->

carousel.js

var currIdx = 0,
    positions = [ 'current', 'right', 'hidden', 'hidden', 'hidden', 'left' ];

function assignPositionClasses(currIdx) {
    // assign new classes to each slide according to currIdx
    $slides.each(function(index) {
        // need a value in range 0..5
        var posIdx = (6 + index-currIdx)%6;

        $(this).removeClass('current right hidden left')
            .addClass(positions[posIdx]);
    });
}

function handleNavigation(offset, ev) {
    ev.preventDefault();
    ev.stopImmediatePropagation();

    currIdx = (6+currIdx+offset) % 6;
    assignPositionClasses(currIdx);
}

$carousel.find('a.next').on('click', $.proxy(handleNavigation, null, 1));
$carousel.find('a.prev').on('click', $.proxy(handleNavigation, null, -1));

carousel.scss

.carousel .slide {
    // transitions for all properties involved
    @include transition(transform .5s, opacity .5s, z-index .5s);
    
    &.center { z-index: 20; }
    &.left, &.right { z-index: 10; }
    &.hidden { z-index: 0; opacity: 0; }
    
    &.left   { @include transform( translate(-200px, 20px) scale(.7) ); }
    &.right  { @include transform( translate(200px, 20px) scale(.7) ); }
    &.hidden { @include transform( translate(0, 20px) scale(.7) ); }
}