Как связать два блока при помощи carousel или slick?

 $('.slider-single').slick({ 
 	slidesToShow: 1, 
 	slidesToScroll: 1, 
 	arrows: true, 
 	fade: false, 
 	adaptiveHeight: true, 
 	infinite: false, 
	useTransform: true, 
 	speed: 400, 
 	cssEase: 'cubic-bezier(0.77, 0, 0.18, 1)', 
 }); 
 
 $('.slider-nav') 
 	.on('init', function(event, slick) { 
 		$('.slider-nav .slick-slide.slick-current').addClass('is-active'); 
 	}) 
 	.slick({ 
 		slidesToShow: 7, 
 		slidesToScroll: 7, 
 		dots: false, 
 		focusOnSelect: false, 
 		infinite: false, 
 		responsive: [{ 
 			breakpoint: 1024, 
 			settings: { 
 				slidesToShow: 5, 
 				slidesToScroll: 5, 
 			} 
 		}, { 
 			breakpoint: 640, 
 			settings: { 
 				slidesToShow: 4, 
 				slidesToScroll: 4, 
			} 
 		}, { 
 			breakpoint: 420, 
 			settings: { 
 				slidesToShow: 3, 
 				slidesToScroll: 3, 
		} 
 		}] 
 	}); 
 
 $('.slider-single').on('afterChange', function(event, slick, currentSlide) { 
 	$('.slider-nav').slick('slickGoTo', currentSlide); 
 	let currrentNavSlideElem = '.slider-nav .slick-slide[data-slick-index="' + currentSlide + '"]'; 
 	$('.slider-nav .slick-slide.is-active').removeClass('is-active'); 
 	$(currrentNavSlideElem).addClass('is-active'); 
 }); 
 
 $('.slider-nav').on('click', '.slick-slide', function(event) { 
 	event.preventDefault(); 
 	let goToSingleSlide = $(this).data('slick-index'); 
 	$('.slider-single').slick('slickGoTo', goToSingleSlide); 
 });

body { background-color: #aacccc } 
 
.js .slider-single > div:nth-child(1n+2) { display: none } 
 
.js .slider-single.slick-initialized > div:nth-child(1n+2) { display: block } 
 
h3 { 
	background: #f0f0f0; 
	color: #3498db; 
	font-size: 2.25rem; 
	margin: .5rem; 
	padding: 2%; 
	position: relative; 
	text-align: center; 
} 
 
.slider-single h3 { 
	line-height: 10rem; 
} 
 
.slider-nav h3::before { 
	content: ""; 
	display: block; 
	padding-top: 75%; 
} 
 
.slider-nav h3 span { 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%); 
} 
 
.slider-nav .slick-slide { cursor: pointer; } 
 
.slick-slide.is-active h3 { 
	color: #c00; 
	background-color: #fff 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<link href="//kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> 
 
<div id="page"> 
	<div class="row"> 
		<div class="column small-11 small-centered"> 
			<h2>Slick Slider Syncing</h2> 
			<div class="slider slider-single"> 
				<div><h3>1</h3></div> 
				<div><h3>2</h3></div> 
				<div><h3>3</h3></div> 
				<div><h3>4</h3></div> 
				<div><h3>5</h3></div> 
				<div><h3>6</h3></div> 
				<div><h3>7</h3></div> 
				<div><h3>8</h3></div> 
				<div><h3>9</h3></div> 
				<div><h3>10</h3></div> 
			</div> 
			<div class="slider slider-nav"> 
				<div><h3><span>1</span></h3></div> 
				<div><h3><span>2</span></h3></div> 
				<div><h3><span>3</span></h3></div> 
				<div><h3><span>4</span></h3></div> 
				<div><h3><span>5</span></h3></div> 
				<div><h3><span>6</span></h3></div> 
				<div><h3><span>7</span></h3></div> 
				<div><h3><span>8</span></h3></div> 
				<div><h3><span>9</span></h3></div> 
				<div><h3><span>10</span></h3></div> 
			</div> 
		</div> 
	</div> 
</div>