JSFiddle - React, Tailwind, and code Playground

by defmetalhead

HTML

<div id="leftArrow"><div id="arrowLeft"></div></div>
<div id="rightArrow"><div id="arrowRight"></div></div>
<div id="container">
    <div id="upcomingEvents">
	    <ul class="upComingTiles">
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
           <li>6</li>
           <li>7</li>
           <li>8</li>
           <li>9</li>
        </ul>
    </div>
</div>

CSS

#container {
   width: 306px;
    clear: both;
    overflow: hidden;
}

#upcomingEvents {
    height: 152px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 1000%;
}

#leftArrow {
    background: none repeat scroll 0 0 #000000;
    height: 50px;
    opacity: 0.6;
    width: 40px;
    float: left;
}

#arrowLeft {
    border-bottom: 25px solid rgba(0, 0, 0, 0);
    border-right: 25px solid #FFFFFF;
    border-top: 25px solid rgba(0, 0, 0, 0);
}

#rightArrow {
    background: none repeat scroll 0 0 #000000;
    height: 50px;
    opacity: 0.6;
    width: 40px;
    float: left;
    margin-left: 10px;
}

#rightArrow:after {
    content: "";
    clear: both;
    display: table;
}


#arrowRight {
    border-bottom: 25px solid rgba(0, 0, 0, 0);
    border-left: 25px solid #FFFFFF;
    border-top: 25px solid rgba(0, 0, 0, 0);
}

.upComingTiles {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.upComingTiles li {
    background: none repeat scroll 0 0 #D3D3D3;
    float: left;
    height: 151px;
    position: relative;
    width: 100px;
    margin-right: 3px;
}

JavaScript

$('#rightArrow').on('click', function () {
	var end = $(".upComingTiles li").length;
	$(".upComingTiles").animate({ 'left': '-=310px' }, 'slow', function () {
		$(".upComingTiles li:first").insertAfter(".upComingTiles li:last")
	});
});
$('#leftArrow').on('click', function () {
	var end = $(".upComingTiles li").length;
	$(".upComingTiles").animate({ 'left': '+=310px' }, 'slow', function () {
		$(".upComingTiles li:first").insertBefore(".upComingTiles li:last")
	});
});