Infinite slider (try)

by AntowaKartowa

HTML

<div class="slider">
  <div class="viewport">
    <div class="ribbon">
      <div class="itm">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias distinctio autem error minus voluptates accusantium.</p>
      </div>
      <div class="itm">
        <p>Minus illum velit itaque recusandae beatae odit ratione eaque. Quod officia iste placeat perspiciatis nobis.</p>
      </div>
      <div class="itm">
        <p>Id nulla eligendi consequatur nihil modi velit cumque tempore perferendis autem voluptate omnis illum ipsam.</p>
      </div>
      <div class="itm">
        <p>Totam id velit distinctio quasi odit corrupti cupiditate! Dolores harum maiores consequuntur sequi earum doloremque.</p>
      </div>
      <div class="itm">
        <p>Consequuntur ipsam sunt cumque molestiae reiciendis architecto perspiciatis repellat sit quis repudiandae vitae amet voluptas.</p>
      </div>
      <div class="itm">
        <p>Facilis vel sequi maiores at esse delectus possimus ducimus. Veniam perferendis fuga fugit commodi nostrum.</p>
      </div>
      <div class="itm">
        <p>Voluptatibus quis quos assumenda eos commodi laboriosam cumque hic blanditiis atque molestias aut fugiat reiciendis!</p>
      </div>
      <div class="itm">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias distinctio autem error minus voluptates accusantium.</p>
      </div>
    </div>
  </div>
  <div class="arrows">
    <div class="arr arr-p">&lt;</div>
    <div class="arr arr-n">&gt;</div>
  </div>
</div>

CSS

.slider {
  width: 510px;
  margin: 0 auto;
}

.viewport {
  overflow: hidden;
}

.ribbon {
  position: relative;
  width: 2000em;
  z-index: 3;
  background-color: #fff;
}

.ribbon:after {
  content: ' ';
  display: table;
  clear: both;
}

.itm {
  position: relative;
  float:left;
  width: 150px;
  margin: 0 10px;
  -webkit-transition: -webkit-transform 0.3s;
	-moz-transition: transform 0.3s;
	-ms-transition: transform 0.3s;
	-o-transition: transform 0.3s;
	transition: transform 0.3s;
}

.flash {
    visibility: hidden;
    -webkit-transition-property: none;
    -moz-transition-property: none;
    -ms-transition-property: none;
    -o-transition-property: none;
    transition-property: none;
    z-index: -1;
    background-color: #f00;
}

.arrows {
  width: 80px;
  margin: 0 auto;
}

.arr {
  width: 38px;
  height: 38px;
  background-color: #666;
  text-align: center;
  color: #fff;
  float: left;
  margin: 0 1px;
  font-size: 20px;
  line-height: 2em;
  cursor: pointer;
}

.arr:hover {
  background-color: #69babc;
}

JavaScript

var f_width = 0,
        u_width = 0,
        visible = 0,
        u_total = 0,
        u_start = 0,
        u_end = 0,
        u_array = [],
        state = false;
  
    function init() {
        f_width = $('.slider').width();
        u_width = $('.itm:eq(1)').outerWidth(true);
        visible = f_width / u_width;
        u_total = $('.itm').length;
        u_end = visible - 1;
        
        $('.itm').each(function(index, value) {
            u_array.push($(value));
        });
    }
  
    function listen() {
        $('.arr-p').on('click', prev);
        $('.arr-n').on('click', next);
    }
  
    function next(e) {
        if (state) return false;
        state = true;
        
        var lft = (-u_width) * (u_start + 1),
            ccl_stp = u_start + visible + 2,
            j = 0;
        
        for (var i = u_start, n = -1; i < ccl_stp; i++, n++) {
            
            j = i;
            if (i >= u_total) j = i - u_total;
            if (i == u_total) lft = u_width * n;
            
            if (n == 0) u_start = j;
            if (n == visible - 1) u_end = j;
            if (n == visible)
                flash(j, lft);
            else
                move(j, lft);
            
        }      
    }
    
    function prev(e) {
        if (state) return false;
        state = true;
        
        var lft = u_width * (visible - u_end),
            ccl_stp = u_end - visible - 2,
            j = 0;
        
        for (var i = u_end, n = visible + 1; i > ccl_stp; i--, n--) {
            
            j = i;
            if (i < 0) j = u_total + i;
    
            if (i == -1) lft = u_width * (-u_total + n);
            
            if (n == visible) u_end = j;
            if (n == 1) u_start = j;
            if (n == 0)
                flash(j, lft);
            else
                move(j, lft);

        }
    }
   
    function move(i, val) {
        u_array[i].css({'transform': 'translateX(' + val + 'px)'});
    }
    
    function...