JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="imgs">
	<ul>
		<li><img src="http://placehold.it/100x40" alt="" /></li>
		<li><img src="http://placehold.it/110x40" alt="" /></li>
		<li><img src="http://placehold.it/80x40" alt="" /></li>
		<li><img src="http://placehold.it/40x40" alt="" /></li>
		<li><img src="http://placehold.it/60x40" alt="" /></li>
		<li><img src="http://placehold.it/120x40" alt="" /></li>
		<li><img src="http://placehold.it/70x40" alt="" /></li>
		<li><img src="http://placehold.it/80x40" alt="" /></li>
		<li><img src="http://placehold.it/50x40" alt="" /></li>
		<li><img src="http://placehold.it/90x40" alt="" /></li>
		<li><img src="http://placehold.it/40x40" alt="" /></li>
		<li><img src="http://placehold.it/20x40" alt="" /></li>
		<li><img src="http://placehold.it/60x40" alt="" /></li>
	</ul>
</div>

<script>
/* jquery mobile swipe */
/*! jQuery Mobile v1.2.0 jquerymobile.com | jquery.org/license */
(function(a,b,c){typeof define=="function"&&define.amd?define(["jquery"],function(d){return c(d,a,b),d.mobile}):c(a.jQuery,a,b)})(this,document,function(a,b,c,d){(function(a,b){var d={touch:"ontouchend"in c};a.mobile=a.mobile||{},a.mobile.support=a.mobile.support||{},a.extend(a.support,d),a.extend(a.mobile.support,d)})(a),function(a,b,c,d){function x(a){while(a&&typeof a.originalEvent!="undefined")a=a.originalEvent;return a}function y(b,c){var e=b.type,f,g,i,k,l,m,n,o,p;b=a.Event(b),b.type=c,f=b.originalEvent,g=a.event.props,e.search(/^(mouse|click)/)>-1&&(g=j);if(f)for(n=g.length,k;n;)k=g[--n],b[k]=f[k];e.search(/mouse(down|up)|click/)>-1&&!b.which&&(b.which=1);if(e.search(/^touch/)!==-1){i=x(f),e=i.touches,l=i.changedTouches,m=e&&e.length?e[0]:l&&l.length?l[0]:d;if(m)for(o=0,p=h.length;o<p;o++)k=h[o],b[k]=m[k]}return b}function z(b){var c={},d,f;while(b){d=a.data(b,e);for(f in d)d[f]&&(c[f]=c.hasVirtualBinding=!0);b=b.parentNode}return c}function A(b,c){var...

CSS

.imgs ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
  text-align: center;
}
.imgs a.next, .imgs a.prev {
  opacity: 0;
}
.imgs:hover a.next, .imgs:hover a.prev {
    opacity: 0.4;
}
.imgs a.next:hover, .imgs a.prev:hover {
	opacity: 0.8;
}
.imgs a.next, .imgs a.prev {
	position: absolute;
    z-index: 999;
    display: block;
    width: 30px;
    height: 30px;
	border-radius: 30px;
    margin: 35px 20px;
    line-height: 31px;
	background-color: #999;
	color: #fff;
	padding-left: 7px;
}
.imgs a.next {
	right: 0px;
	padding-left: 9px;
}

.imgs ul {
	height: 100px;
	display: block;
	overflow: hidden;
	position: relative;
  border: 1px solid #999;
  border-width: 1px 0;
}
.imgs li {
	padding: 20px 0;
	display: inline-block;
	margin: 0px 20px;
	overflow: hidden;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	position: relative;
	z-index: 30;
  transition: all 0.5s ease;
}
.imgs li.hidden {
	max-width: 0px;
	margin: 0px;
}

JavaScript

/*

see <script>-tag at html for additional jquery mobile swipe
source: http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/
*/

$(document).ready(function() 
{
  $('.imgs ul').before('<a href="#" class="prev">prev</a>' 
            + '<a href="#" class="next">next</span></a>');
  $('.imgs a.prev').on('click', function () {
    imgsSlider('right');
    return false;
  })
  $('.imgs a.next').on('click', function () {
    imgsSlider('left');
    return false;
  })
  $('.imgs ul').swiperight(function() {
    imgsSlider('right');
  });  
  $('.imgs ul').swipeleft(function() {  
    imgsSlider('left');
  });
});

function imgsSlider( direction )
{
	var hidden = $(".imgs li.hidden").length,
		index = hidden - ( direction == 'right' ? 1: 0 ),
		visible = $(".imgs li:not(.hidden)").length,
		original = $(".imgs li:not(.copy)").length;
	
	if ( ( hidden <= 1 && direction == 'right' ) || ( visible < original && direction == 'left' ) )
	{
		var cloned = $('.imgs ul').clone();
		cloned.find('li.hidden').removeClass('hidden');
		cloned.find('li').remove('li.copy');
		
		if ( direction == 'right' )
		{
			$('.imgs ul').prepend( cloned.find('li').addClass('copy hidden') );
			index += original;
		}
		else
			$('.imgs ul').append( cloned.find('li').addClass('copy') );
	}
	
	direction == 'right' ? $('.imgs li:eq(' + index + ')').removeClass('hidden'):
		$('.imgs li:eq(' + index + ')').addClass('hidden');
	if ( hidden >= original && direction == 'left' )
	{
		$('li:lt(' + original + ')', '.imgs ul').remove();
		$('li:lt(' + original + ')', '.imgs ul').removeClass('copy');
	}
}