<div class="slider">
  <!-- START SLIDER -->
  <div class="small2">
    <ul class="small-ul list-unstyled" data-small2="">
      <li><img src="http://placehold.it/200x150/000/FFF?text=img01" width="200" height="150" alt="small" /></li>
      <li><img src="http://placehold.it/200x150/111/FFF?text=img02" width="200" height="150" alt="small" /></li>
      <li><img src="http://placehold.it/200x150/222/FFF?text=img03" width="200" height="150" alt="small" /></li>
      <li><img src="http://placehold.it/200x150/333/FFF?text=img04" width="200" height="150" alt="small" /></li>
      <li><img src="http://placehold.it/200x150/444/FFF?text=img05" width="200" height="150" alt="small" /></li>
      <li><img src="http://placehold.it/200x150/555/FFF?text=img06" width="200" height="150" alt="small" /></li>
      <li><img src="http://placehold.it/200x150/666/FFF?text=img07" width="200" height="150" alt="small" /></li>
      <li><img src="http://placehold.it/200x150/777/FFF?text=img08" width="200" height="150" alt="small" /></li>
      <li><img src="http://placehold.it/200x150/888/FFF?text=img09" width="200" height="150" alt="small" /></li>
      <li><img src="http://placehold.it/200x150/999/FFF?text=img10" width="200" height="150" alt="small" /></li>
    </ul>
    <span class="small-span"><i class="fa fa-arrow-circle-right fa-3x"></i></span>
    <span class="small-span"><i class="fa fa-arrow-circle-left fa-3x"></i></span>
  </div>
</div>
<!-- END SLIDER -->

/* ------------------------------- Start Slider ----------------------------------------- */
ul {padding: 0; list-style: none}
.slider {
  padding-top: 50px;
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden;
  position: relative;
}


/* ------------------------------- */

.small2 {
  font-size: 14px;
  margin-top: 50px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.small2 .small-ul {
  display: flex;
  position: absolute;
  top: 0
}

.small2 .small-ul li {
  margin-left: 5px;
  transition: width 1s ease-in-out;
  margin-left: -4px;
}

.small2 .small-span {
  position: absolute;
  top: calc(50% - 20px);
  opacity: .1;
  cursor: pointer;
  color: #FFF;
  text-shadow: 1px 2px 10px rgba(0, 0, 0, 1);
}

.small2 .small-span:hover {
  opacity: .5
}

.small2 .small-span:first-of-type {
  right: 10px
}

.small2 .small-span:last-of-type {
  left: 10px
}

// All Variable ===============================================================================
var count = 1,
  smallParent2 = $('.small2'),
  smallUlLi2 = $('.small2 .small-ul li'),
  smallSpan2 = $('.small2 .small-span'),
  sliderTime = 1000,
  smallSetLeft2,
  smallRunLeft2;
// Reset Li length ---------------------------------------------------------------------------
smallUlLi2.parent().attr('data-small2', smallUlLi2.length);
// Reset Width And Height --------------------------------------------------------------------
smallParent2.width(smallParent2.parent().width()).height(smallUlLi2.height());
smallUlLi2.parent().width(smallUlLi2.width() * (smallUlLi2.length + 1));
// Run Set -----------------------------------------------------------------------------------
smallSetLeft2 = function() {
  var smallUlLi2 = $('.small2 .small-ul li');
  if (smallUlLi2.length <= smallUlLi2.parent().data('small2')) {
    smallUlLi2.parent().append('<li>' + smallUlLi2.first().html() + '</li>').children().first().animate({
      marginLeft: -smallUlLi2.first().outerWidth()
    }, sliderTime, function() {
      smallUlLi2.first().remove();
    });
  }
};
// Run Auto Slider -------------------------------------------------------------------------
smallRunLeft2 = setInterval(smallSetLeft2, sliderTime * 3);
// Pause -----------------------------------------------------------------------------------
smallSpan2.mouseenter(function() {
  clearInterval(smallRunLeft2);
});
// Resume ----------------------------------------------------------------------------------
smallSpan2.mouseleave(function() {
  smallRunLeft2 = setInterval(smallSetLeft2, sliderTime * 3);
});
// Right -----------------------------------------------------------------------------------
smallSpan2.first().on('click', function() {
  var smallUlLi2 = $('.small2 .small-ul li'),
    smallLastLi2 = smallUlLi2.last().html();
  if (smallUlLi2.length <= smallUlLi2.parent().data('small2')) {
    smallUlLi2.parent().prepend('<li>' + smallUlLi2.last().html() + '</li>').children().last();
    smallUlLi2.first().prev().css('width', 4);
    smallUlLi2.first().prev().animate({
      width: smallUlLi2.first().outerWidth()
    }, sliderTime / 5, function() {
      smallUlLi2.last().remove();
    });
  }
});
// Left ------------------------------------------------------------------------------------
smallSpan2.last().on('click', function() {
  var smallUlLi2 = $('.small2 .small-ul li'),
    smallFirstLi2 = smallUlLi2.first().html();
  if (smallUlLi2.length <= smallUlLi2.parent().data('small2')) {
    smallUlLi2.parent().append('<li>' + smallUlLi2.first().html() + '</li>').children().first().animate({
      marginLeft: -smallUlLi2.first().outerWidth()
    }, sliderTime, function() {
      smallUlLi2.first().remove();
    });
  }
});

// Em An
// 28-1-2017
// Basic: https://codepen.io/Em-An/pen/PzBZAd
// Update: https://codepen.io/Em-An/pen/VPrdPW