JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:void(0);" class="btnPrevious">Previous</a>
	<a href="javascript:void(0);" class="btnNext">Next</a>
	<div class="carousel">
		<ul>
			<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>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
		</ul>
	</div>

CSS

.carousel{
			padding-top: 20px;
			width: 357px;
			overflow: hidden;
			height: 50px;
			position: relative;
		}.carousel ul{
			position: relative;
			list-style: none;
			list-style-type: none;
			margin: 0;
			height: 50px;
			padding: 0;
		}.carousel ul li{
			position: absolute;
			height: 25px;
			width: 50px;
			float: left;
			margin-right: 1px;
			background: #f2f2f2;
			text-align: center;
			padding-top: 25px;
		}

JavaScript

$(function() {
	var carousel = $('.carousel ul');
	var carouselChild = carousel.find('li');
	var clickCount = 0;
	var canClick = true;

	itemWidth = carousel.find('li:first').width() + 1; //Including margin

	//Set Carousel width so it won't wrap
	carousel.width(itemWidth * carouselChild.length);

	//Place the child elements to their original locations.
	refreshChildPosition();

	//Set the event handlers for buttons.
	$('.btnNext').click(function(e) {
		if ($(".carousel").find("li:eq(6)").text() != 14) {
			if (canClick) {
				canClick = false;
				clickCount++;
				//Animate the slider to left as item width 
				carousel.stop(false, true).animate({
					left: '-=' + itemWidth
				}, 300, function() {
					//Find the first item and append it as the last item.
					lastItem = carousel.find('li:first');
					lastItem.remove().appendTo(carousel);
					lastItem.css('left', ((carouselChild.length - 1) * (itemWidth)) + (clickCount * itemWidth));
					canClick = true;
				});
			}
        }
        if ($(".carousel").find("li:eq(0)").text() >= 1) {
            $(".btnPrevious").css('color', '');

        }
		if (canClick) {
            canClick = false; {
				$(".btnNext").css('color', 'red');
            }

			canClick = true;
        }
	});

	$('.btnPrevious').click(function() {
		if ($(".carousel").find("li:eq(0)").text() != 1) {
			if (canClick) {
				canClick = false;
				clickCount--;
				//Find the first item and append it as the last item.
				lastItem = carousel.find('li:last');
				lastItem.remove().prependTo(carousel);

				lastItem.css('left', itemWidth * clickCount);
				//Animate the slider to right as item width 
				carousel.finish(true).animate({
					left: '+=' + itemWidth
				}, 300, function() {
					canClick = true;
				});
			}
		}
        if ($(".carousel").find("li:eq(6)").text() != 14){
            $(".btnNext").css('color', '');
        }

		if (canClick) {
			canClick = false; {
				$(".btnPrevious").css('color', 'red');
			}

			canClick =...