JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="carousel">
<a href="#" class="arrow left-arrow" id="prev">&#8249; </a>
  <div class="gallery">
    <ul id="images">
      <li><img class="first" src=""></li>
      <li><img src="2.png"></li>
      <li><img src="3.png"></li>
      <li><img src="4.png"></li>
      <li><img src="5.png"></li>
      <li><img src="6.png"></li>
      <li><img src="7.png"></li>
      <li><img src="8.png"></li>
      <li><img src="9.png"></li>
      <li><img src="10.png"></li>
    </ul>
  </div>
<a href="#" class="arrow right-arrow" id="next" onclick="move(ul)">&#8250; </a>
</div>
</body>

CSS

body {
  padding: 10px
}

.carousel {
  position: relative;
  width: 398px;
  padding: 10px 40px;
  border: 1px solid #CCC;
  border-radius: 15px;
  background: #eee;
}
.carousel img {
  width: 130px;
  height: 130px;
  display: block; /* если не поставить block, в ряде браузеров будет inline -> лишнее пространтсво вокруг элементов */
}
.carousel .arrow {
  position: absolute;
  top: 57px;
  padding: 3px 8px 8px 9px;
  background: #ddd;
  border-radius: 15px;
  font-size: 24px;
  color: #444;
  text-decoration: none;
}

.carousel .arrow:hover {
  background: #ccc;
}
.carousel .left-arrow {
  left: 7px;
}
.carousel .right-arrow {
  right: 7px;
}
.gallery {
  width: 390px;
  overflow: hidden;
}
.gallery ul {
  height: 130px;
  width: 9999px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery ul li {
	float: left;
}

JavaScript

/* этот код помечает картинки, для удобства разработки */
var lis = document.getElementsByTagName('li');
for(var i=0; i<lis.length; i++) {
  lis[i].style.position='relative';
  var span = document.createElement('span');
  // обычно лучше использовать CSS-классы,
  // но этот код - для удобства разработки, так что не будем трогать стили
  span.style.cssText='position:absolute;left:0;top:0';
  span.innerHTML = i+1;
  lis[i].appendChild(span);
}

/* конфигурация */
var width = 130; // ширина изображения
console.log($("ul").height());
//console.log("001");
var count = 3; // количество изображений
var click_cnt = 1;

var ul = document.getElementById('images');
var imgs = ul.getElementsByTagName('li');

var position = 0; // текущий сдвиг влево
var left = 0; // начальное значение

/*
$.get("http://www.lawofattraction.ru/_fr/9/6312821.gif", 
	function () {
		$(".first").attr("src","data:image/gif,");
		alert("success");
	}
);
*/


$.ajax({
    type: "GET",
    url: 'http://www.lawofattraction.ru/_fr/9/6312821.gif',
    datatype:"image/gif",
    success: function (data) {
        $('.first').attr('src', data);
		alert("success");
      }
});

document.getElementById('prev').onclick = function() {
  if (position >= 0) return false; // уже до упора

  // последнее передвижение влево может быть не на 3, а на 2 или 1 элемент
  /*
  position = Math.min(position + width*count, 0)
  ul.style.marginLeft = position + 'px';
  */
  position = 260-130*click_cnt;

  /*
  ul.style.marginLeft = position + 'px';
  click_cnt--;
  */
  
  function frame_prev() { // функция для отрисовки
    
	left--;
    ul.style.marginLeft = -left + 'px';
	if (left == 130*click_cnt-260) {
		clearInterval(timer); // завершить анимацию
		click_cnt--;
	}
	
	
  }
  var timer = setInterval(frame_prev, 1) // рисовать каждые 10мс  
  
  return false;
}

document.getElementById('next').onclick = function() {
  if (position <= -width*(imgs.length-count)) return false; // уже до упора
  //if (left <=...