Code for Feature carousel.

carousel.js

(function($){
  //General vars
  $container = $('.carousel-container');
  $carousel = $('#storycarousel');
  $slide = $carousel.find('.carousel-feature');

  slides = [];

  // Measurements
  carouselWidth = $carousel.width();

  $slide.each(function(){
    slides.push($(this));
  });

  //initial state

  for (i=0; i<slides.length; i++) {
    slides[i].attr('data-index', i);
    slides[i].css({position:'absolute', opacity: '0.5', top: '40px', width:'350px', height: '175px'});
    slides[i].removeClass('active');
    slides[1].addClass('active');
  }

  $active =  $carousel.find('.carousel-feature.active');
  $active.css({opacity:'1', width:'375px', height:'200px', top:'0', left:'225px'});

  function setup() {
     $slide.each(function(){
      index = $(this).index();
      active = $active.index();
      if (index == active-1) {
        $(this).css({left: '0'});
      } else if (index == active+1){
        $(this).css({left: '450px'});
      }
    });
  }
  setup();

  function prevSlide() {
    index =  $('.carousel-feature.active').index();
    direction = 'left';
    next = $('.carousel-feature.active').next();
    if (index !=2) {
      next.addClass('active').prev().removeClass('active');
      changePositions(index, direction);
    } else {
      $slide.eq(0).addClass('active').siblings().removeClass('active');
      changePositions(index, direction);
    }
}
    function nextSlide() {
      index =  $('.carousel-feature.active').index();
      direction = 'right';
      prev = $('.carousel-feature.active').prev();
      if (index !==0) {
        prev.addClass('active').siblings().removeClass('active');
        changePositions(index, direction);
      } else {
        $slide.eq(2).addClass('active').siblings().removeClass('active');
        changePositions(index, direction);
      }
  }

  function changePositions(index, direction) {
    console.log(index);
    if (direction == 'right') {
       if (index != 2) {
        $('.carousel-feature.active').animate({opacity:'1', width:'375px', height:'200px', top:'0', left:'225px'}, 800);
        $slide.eq(index).animate({position:'absolute', left:'450px', opacity: '0.5', top: '40px', width:'350px', height: '175px'}, 800);
        $slide.eq(index+1).animate({left: '0'}, 800);
      } else {
       $('.carousel-feature.active').animate({opacity:'1', width:'375px', height:'200px', top:'0', left:'225px'}, 800);
        $slide.eq(index).animate({position:'absolute', left:'450px', opacity: '0.5', top: '40px', width:'350px', height: '175px'}, 800);
         $slide.eq(index-2).animate({left: '0'}, 800);
      }
    } else {
      if (index !== 0) {
        $('.carousel-feature.active').animate({opacity:'1', width:'375px', height:'200px', top:'0', left:'225px'}, 800);
        $slide.eq(index).animate({position:'absolute', left:'0', opacity: '0.5', top: '40px', width:'350px', height: '175px'}, 800);
        $slide.eq(index-1).animate({left: '450px'}, 800);
      } else {
       $('.carousel-feature.active').animate({opacity:'1', width:'375px', height:'200px', top:'0', left:'225px'}, 800);
        $slide.eq(index).animate({position:'absolute', left:'0', opacity: '0.5', top: '40px', width:'350px', height: '175px'}, 800);
        $slide.eq(index+2).animate({left: '450px'}, 800);
      }
    }
  }

$('#carousel-right').click(function(){
  nextSlide();
});
$('#carousel-left').click(function(){
  prevSlide();
});

})(jQuery);

index.html

<div class="carousel-container">
  			<div id="storycarousel">
					<div class="carousel-feature active">
						<header>1</header>
					</div>
					<div class="carousel-feature">
						<header>2</header>
					</div>
					<div class="carousel-feature">
						<header>3</header>
					</div>
				</div>
				<div id="carousel-left"><< Previous</div>
				<div id="carousel-right">Next >></div>
			</div>

style.css

/* Carousels
*-------------*/
.carousel-container {
  position:relative;
	height:300px;
	margin-top:20px;
}
.carousel-feature {
	background:#fff;
	float:absolute !important;
	width:375px;
	height:200px;
	border:1px solid #999;
	z-index:0;
	header {
		border-bottom:1px solid #999;
		padding:10px 0;
	}
	&.active {
		z-index:100;
	}
}

#carousel-right, #carousel-left {
	cursor:pointer;
}