<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<div class="carusel">
  <div class="carusel-slides">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>    
  </div>
</div>
<div class="pager">
  <a href="#preview" class="preview" onclick="moveCarusel('preview');"><< Preview</a>
  <a href="#next" class="next" onclick="moveCarusel('next');">Next >></a>
</div>
.carusel{
  width: 100%;
  height: 198px;
  overflow: hidden;
  background: black;
}

.pager{
  max-width: 320px;
  margin: 0 auto;
}

.carusel-slides{
  width: 100%;
  height: 100%;
  position: relative;
  left: 0px;
  display: inline-block;
}

.carusel-slides:after{
  content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.row{
  display: inline-block;
  width: 184px;
  height: calc(100% - 8px);
  float: left;
  margin: auto 8px; 
  border: 2px solid white;
  background: darkblue;
}
.row:nth-child(even){
  background: #003D80;
}
var carusel_slides = 0;
var slide_average_width = 0;
var carusel_increase_pager = 0;

$(document).ready(function(){
  $('.carusel-slides .row').each(function(i, obj){
    carusel_slides += $(this).outerWidth(true);
  });
  slide_average_width = carusel_slides / $('.carusel-slides .row').size();
 
  carusel_increase_pager = getFixIncreaseCarousel();
  console.debug(carusel_increase_pager);
  $('.carusel-slides').width(carusel_slides);
  
});

$(window).bind("resize", maxRCarousel);

function getFixIncreaseCarousel(){
  var increase = Math.floor($(".carusel").width() / slide_average_width);
  increase = (increase < 1 ? 1 : increase);
  return increase * slide_average_width;
}

function maxRCarousel(){
  carusel_increase_pager = getFixIncreaseCarousel();
  $('.carusel-slides').css('left', 0);
  //console.debug(carusel_increase_pager);
}

function moveCarusel(action){
  
  var action_operator = (action == 'next' ? -1 : 1);
  
  var status = Number($('.carusel-slides').css('left').replace('px',''));
  
  var next = (status * action_operator) + (carusel_increase_pager)
  next = next * action_operator;
  console.debug('s = ' + status);
  console.debug('nt = ' + next);
  console.debug('cs = ' + carusel_slides);
  console.debug(carusel_increase_pager);

 if( 
   next > 0
   &&
   action_operator > 0
 ){
    $('.carusel-slides').animate(
      {left : -(carusel_slides - carusel_increase_pager)}, 1500);
  }else if(action == 'next' && next <= (carusel_slides  *-1) ){
    $('.carusel-slides').animate({left : 0}, 1500);
  }else{
    $('.carusel-slides').animate({left : next}, 1500);
  }

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.