JSFiddle - React, Tailwind, and code Playground

HTML

<a href="" class="downSlide">назад</a>	
<div class="minSlide" data-cur=3>
                <div class="block1"></div>
                <div class="block2"></div>
                <div class="block3"></div>
                <div class="block4"></div>
                <div class="block5"></div>
                <div class="block6"></div>
                <div class="block7"></div>
                <div class="block8"></div>
                <div class="block9"></div>
                <div class="block10"></div>	
		</div>
    <a href="" class="nextSlide">вперед</a>

CSS

.minSlide{
	width: 600px;
	height: 80px;
	border-radius: 10px;
	background: #ccc;
	margin:0 8px;
}
.minSlide div{
	margin:10px 12px 0 13px;
    float:left;
}
.minSlide div{
	height: 60px;
	width: 175px;
}
.block1,.block4,.block7,.block10{
 background: red;   
}

.block2,.block5,.block8{
    background: green;
}
.block3,.block6,.block9{
 background: blue;
}

JavaScript

jQuery(document).ready(function($) {
    var slide= $('.minSlide').children().length;
	$('.minSlide div').css('display', 'none').slice(0, 3).css('display', 'block');

	function nextMinSlide () {
	var check = parseInt($('.minSlide').data('cur'));	
	if(check>=slide)
	{
		check=0
	}
	$('.minSlide div').css('display', 'none');
	$('.minSlide div').slice(check, check+3).fadeIn(1200);
	check=check+3
	$('.minSlide').data('cur',check);
	}
		$('.nextSlide').click(function(event) {
			event.preventDefault();
			nextMinSlide();
		});;
	});