JSFiddle - React, Tailwind, and code Playground

HTML

<div id="solitaireFramesSelectorOuter">
	<div id="solitaireFramesSelectorInner"><img src="images/frame1.jpg"/><img src="images/frame2.jpg" /><img src="images/frame3.jpg" /></div>
</div>

CSS

#solitaireFramesSelectorOuter {
				color: rgb(34, 34, 34);
display: block;
float: left;
font-family: Verdana, Arial, sans-serif;
font-size: 11.111111640930176px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 100px;
line-height: 15.555556297302246px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
text-align: left;
width: 249.46180725097656px;
			}
			
			#solitaireFramesSelectorInner {
				color: rgb(34, 34, 34);
display: block;
font-family: Verdana, Arial, sans-serif;
font-size: 11.111111640930176px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 100%;
left: 0px;
line-height: 15.555556297302246px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
position: relative;
text-align: left;
top: 0px;
width: 300px;
			}
			
			#solitaireFramesSelectorInner>img {
				color: rgb(34, 34, 34);
cursor: pointer;
display: inline;
font-family: Verdana, Arial, sans-serif;
font-size: 11.111111640930176px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 100px;
line-height: 15.555556297302246px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
text-align: left;
width: 100px;
			}

JavaScript

var n = $('#solitaireFramesSelectorInner');
				var val = parseInt(n.css('left'));
				if (val > -300 /* images * 100 */) {
					val -= 100;
					n.css('left', val);
				}
				console.log(val, n.css('left'));


				var n = $('#solitaireFramesSelectorInner');
				var val = parseInt(n.css('left'));
				if (val < 0) {
					val += 100;
					n.css('left', val);
				}
				console.log(val, n.css('left'));