Slick Slider Syncing

index.html

<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>

script.js

 $('.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);
 	var 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();
 	var goToSingleSlide = $(this).data('slick-index');

 	$('.slider-single').slick('slickGoTo', goToSingleSlide);
 });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

slick-slider-syncing.markdown

Slick Slider Syncing

Forked from Captain Anonymous's Pen GopwyE.

A Pen by kimyangsun on CodePen.

License.

style.css

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
}

styles

<link href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" />
<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet" />

Does it require installing any dependency, library or package? Is there a repository for this public gist? I would like to be able to incorporate it into my angular project.