JSFiddle - React, Tailwind, and code Playground

HTML

<div class="carousel">
  <ul>
    <li>
      <img src="https://content.onliner.by/news/2016/01/submain/3e5dbb5f77241c85535adb17215c6147.jpg" alt="Как правильно наносить ухаживающие за лицом средства?" title="Как правильно наносить ухаживающие за лицом средства?" />
      <h4><a href="#">Как правильно наносить ухаживающие за лицом средства?</a></h4>
      <p>Косметическая индустрия сегодня предлагает огромное множество самой разной продукции по уходу за кожей лица, это кремы, гели, тоники, муссы, гоммажи, различные жидкости и многое другое. И важно не только приобрести необходимые для ухода за нежной кожей лица средства, но и правильно их использовать.</p>
    </li>
    <li>
      <img src="https://content.onliner.by/news/2016/01/submain/3e5dbb5f77241c85535adb17215c6147.jpg" alt="Желтые ногти... как с этим бороться?" title="Желтые ногти... как с этим бороться?" />
      <h4><a href="#">Желтые ногти... как с этим бороться?</a></h4>
      <p>Когда у девушек и женщин желтеют ногти, то большинство относится к этой проблеме, как к косметической, а о нарушениях в организме – сердечнососудистых или эндокринных – думают в последнюю очередь. Понятно, что желтые ногти выглядят не просто некрасиво, но даже отталкивающе, так что мы стремимся быстрее решить проблему.</p>
    </li>
    <li>
      <img src="https://content.onliner.by/news/2016/01/submain/3e5dbb5f77241c85535adb17215c6147.jpg" alt="Привычки, продлевающие жизнь!" title="Привычки, продлевающие жизнь!" />
      <h4><a href="#">Привычки, продлевающие жизнь!</a></h4>
      <p>Для многих здоровый образ жизни ассоциируется с многочисленными запретами и тяжелым трудом над собой, а так хочется просто жить и радоваться этому без усилий и жестких ограничений. Конечно, каждый из нас понимает, что продолжительность жизни напрямую зависит от такого, как ты эту самую жизнь ведешь.</p>
    </li>
    <li>
      <img src="https://content.onliner.by/news/2016/01/submain/3e5dbb5f77241c85535adb17215c6147.jpg" alt="Мыло своими руками!"...

CSS

.carousel {
  position:relative;
  height:200px;
  width:600px;
  overflow:hidden;
}
.carousel ul{
  position:relative;
  transition: right .7s;
  padding: 0;
  margin: 0;
  width: 5000px;

}
.carousel li {
  position:relative;
  display:inline-block;
  margin-left:-4px;
  width:600px;
  height:200px;
}
.carousel li:first-child {
  margin-left:0;
}
.carousel h4 {
  font-size:16pt;
  font-weight:normal;
  text-align:left;
  line-height:28px;
  margin:0 0 20px;
}
.carousel h4 a {
  color:#a15091;
  text-decoration:none;
}
.carousel p {
  text-align:justify;
  line-height:20px;
}
.carousel img {
  float:left;
  width:190px;
  border:5px solid #efcfe9;
  margin-right:15px;
}
.prev, .next {
  display:block;
  float:left;
  width:42px;
  height:42px;
  margin-top:79px;
}
.prev {
  background:url(http://sergeybuslaev.ru/wp-content/uploads/2014/01/strelka.png) no-repeat;
  margin-right:10px;
}
.next {
  background:url(http://sergeybuslaev.ru/wp-content/uploads/2014/01/strelka.png) -44px 0 no-repeat;
  margin-left:10px;
}
.prev:hover {background:url(http://sergeybuslaev.ru/wp-content/uploads/2014/01/strelka.png) 0 -44px no-repeat;}
.next:hover {background:url(http://sergeybuslaev.ru/wp-content/uploads/2014/01/strelka.png) -44px -44px no-repeat;}
.go {

  margin:0 0 10px 47px;
      }
.go a {
  float:left;
  width:10px;
  height:11px;
  text-indent:-9999px;
  background-color: black;
  margin-left:5px;
}
.go a:hover {background-position:0 -11px;}
.go .goActive {background-position:0 -11px;}

JavaScript

var carousel_li = document.querySelector(".carousel ul");
var button_1 = document.querySelector(".button_1");
var button_2 = document.querySelector(".button_2");
var button_3 = document.querySelector(".button_3");
var button_4 = document.querySelector(".button_4");
var button_5 = document.querySelector(".button_5");
var button_6 = document.querySelector(".button_6");
var button_7 = document.querySelector(".button_7");


carousel_li.style.right = 0;

button_1.addEventListener("click", function() {
	carousel_li.style.right = 0 + "px";
});
button_2.addEventListener("click", function() {
	carousel_li.style.right = 600 + "px";
});
button_3.addEventListener("click", function() {
	carousel_li.style.right = 1200 + "px";
});
button_4.addEventListener("click", function() {
	carousel_li.style.right = 1800 + "px";
});
button_5.addEventListener("click", function() {
	carousel_li.style.right = 2400 + "px";
});
button_6.addEventListener("click", function() {
	carousel_li.style.right = 3000 + "px";
});
button_7.addEventListener("click", function() {
	carousel_li.style.right = 3600 + "px";
});