JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider-wrapper">
    <ul class="slide-list">
      <li><img src="http://placehold.it/1280x829" alt=""></li>
      <li><img src="http://placehold.it/1280x829" alt=""></li>
      <li><img src="http://placehold.it/1280x829" alt=""></li>
    </ul>
  </div>
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>

CSS

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.slider-wrapper {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
    position:relative;
}

.slide-list {
  list-style: none;
    display:block;
  width: auto;
    padding:0;
}

.slide-list li {
  float:left;
}

JavaScript

var count = $('.slide-list li').length;
var width = $('.slider-wrapper').width();
$('.slide-list').width(width * count);
$('.slide-list li').width(width);

$(window).resize(function(){
	width = $('.slider-wrapper').width();
    $('.slide-list').width(width * count);
    $('.slide-list li').width(width);
});

$('.prev, .next').on('click', function(){
    var $wrapper = $('.slider-wrapper');
    var width = $wrapper.width();
    $wrapper.animate({
        scrollLeft: $(this).hasClass('prev') ? '-='+width : '+='+width
    },300);
    return false;
});