JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://coolcarousels.frebsite.nl/js/jquery.carouFredSel.js"></script>
<script src="http://cdn.oomta.com/js/jquery/touchswipe/1.3.3/jquery.touchSwipe.min.js"></script>
<div class="wrapper">
  <ul id="foo2">
    <li><img src="http://placehold.it/100x100" alt="" /></li>
    <li><img src="http://placehold.it/100x100" alt="" /></li>
    <li><img src="http://placehold.it/100x100" alt="" /></li>
    <li><img src="http://placehold.it/100x100" alt="" /></li>
    <li><img src="http://placehold.it/100x100" alt="" /></li>
    <li><img src="http://placehold.it/100x100" alt="" /></li>
    <li><img src="http://placehold.it/100x100" alt="" /></li>
    <li><img src="http://placehold.it/100x100" alt="" /></li>
  </ul>
  <a id="prev2" class="prev" href="#">&lt;</a>
  <a id="next2" class="next" href="#">&gt;</a>
</div>

CSS

.wrapper {
  height: 100px;
  position: relative;
  background-color: white;
  margin: 10px auto;
  padding: 50px;
  box-shadow: 0 0 5px #999;
}

.clearfix {
  float: none;
  clear: both;
}

.prev {
  position: absolute;
  z-index: 9;
  top: 50%;
  left: 10px;
}

.next {
  position: absolute;
  z-index: 9;
  top: 50%;
  right: 10px;
}

#foo2 {
  margin: 0;
  padding: 0;
}

#foo2 li {
  display: block;
  float: left;
  height: 100px;
  text-align: center;
  width: 100px;
  color: #8cabbf;
  display: block;
  font: 700 10px/10px Arial;
  text-decoration: none;
}

#foo2 li img {
  border: 1px solid #dfe9ee;
}

JavaScript

$(document).ready(function() {
          $('#foo2').carouFredSel({
            auto: false,
            responsive: false,
            items: {
              visible: 3,
              width: 100
            },
            width: 600,
            prev: '#prev2',
            next: '#next2',
            pagination: "#pager2",
            swipe: {
              onMouse: true,
              onTouch: true
            }
          });
        });