JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="mask">
        <div id="images">
            <img id="a" src="http://lorempixel.com/output/cats-q-c-150-150-1.jpg" data-width="150"  data-h="150">
            <img id="b" src="http://lorempixel.com/output/cats-h-c-100-150-5.jpg" data-width="100" data-h="150">
            
        </div>
    </div>
    <a href="#" class="prev move">&lt;</a>
    <a href="#" class="next move">&gt;</a>
    <div id="buttons"></div>   
</div>

CSS

#container{
	height: 240px;
	margin:100px auto;
	background-color: #CCC;
	padding-top:5px;
	position:relative;
}
#container #buttons{
	height: 20px;
	width: 100%;
	text-align:center;
}

#container #mask{
	overflow: hidden;
	position: relative;
	margin:25px auto;
}

#container #mask #images{
	position:absolute;
	left:0px;
	top:0px;
}

#images img{
	float: left;
	background-color:#E6E6E6;
	padding:3px;
	border:1px solid #939393;
	margin:2px;
}

a.butt{
	height: 16px;
	width: 16px;
	margin-right: 6px;
	border-radius:16px;
	background-color:#999;
	display:inline-block;
}

 a.move {
    display: block;
    height: 40px;
    width: 30px;
    font-size: 24px;
    line-height: 1.6;
    font-weight: 800;
    color: #222;
    background-color: rgb(255,99,71);
    background-color: rgba(255,99,71,0.7);
    text-decoration: none;
    padding: 0 4px;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    text-align: center;
    z-index: 10;
}

 a.prev {
    left: 0;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

 a.next {
    right: 0;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

JavaScript

var wid = 0;
	var maskWidth = 0;
	var arr = [];
	$('#images img').each(function (i) {
	    wid += (parseInt($(this).attr('data-width')) + 12);
	    arr.push($(this).attr('data-width'));
	    if (i < 3) {
	        maskWidth += parseInt($(this).attr('data-width'));
	    }
	});
	 //set container width =	3* mor larger image
	var biggest = Math.max.apply(null, arr) * 3;
	$('#container').css('width', biggest + 'px');
	 //set mask width= width of first 3 images
	$('#mask').css({
	    'width': (maskWidth + 36) + 'px',
	    'height': parseInt($('#images img:first').attr('data-h')) + 12
	});
	 //set images width=width of all images
	$('#images').css({
	    'width': wid + 'px'
	});
	for (a = 0; a < $('#images img').length; a += 3) {
	    $('<a class="butt" id="a' + a + (a + 3) + '"></a>').appendTo('#buttons')
	}

	$('a.butt').click(function () {
	    $('#images').addClass('moved')
	    var widthx = $('#mask').width();
	    var id = $(this).attr('id').slice(1).split('')
	    var collection = $('#images img').slice(id[0], id[1])
	    var newWidth = 0;
	    $(collection).map(function (i, element) {
	        newWidth += parseInt($(element).data('width') + 12);
	    });
	    console.log(newWidth)
	    var pos = $('#images img:eq(' + id[0] + ')').position().left
	    $('#images').animate({
	        'left': (pos * -1) + 'px'
	    });
	    $('#mask').animate({
	        'width': (newWidth) + 'px'
	    });
	})

	function resetx() {
	    if ($('#images').hasClass('moved')) {
	        $('#images').css({
	            'left': '0px'
	        })
	        var newWidth = 0
	        for (a = 0; a < 3; a++) {
	            newWidth += parseInt($('#images img:eq(' + a + ')').attr('data-width')) + 12
	        }
	        $('#mask').css({
	            'width': (newWidth) + 'px'
	        });
	        $('#images').removeClass('moved')
	    }
	}

	 //next and prev click are differnent for the position of image div
	$('.next').click(function (e) {
	    e.preventDefault();
	    resetx()
	    var widthx...