<!-- https://qna.habr.com/q/1017104?e=11478318#answer_item_1981552 -->

<!--    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> -->
   <link rel="stylesheet" href="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.css">
<!-- Slider main container -->
<div class="swiper-container">
	<!-- Additional required wrapper -->
	<div class="swiper-wrapper">
		<!-- Slides -->
		<div class="swiper-slide cat-1">CAT 1 - Slide 1</div>
		<div class="swiper-slide cat-1">CAT 1 - Slide 2</div>
		<div class="swiper-slide cat-2">CAT 2 - Slide 3</div>
		<div class="swiper-slide cat-2">CAT 2 - Slide 4</div>
		<div class="swiper-slide cat-3">CAT 3 - Slide 5</div>
		<div class="swiper-slide cat-3">CAT 3 - Slide 6</div>
		<div class="swiper-slide cat-3">CAT 3 - Slide 7</div>
		<!-- ... -->
	</div>
	<!-- If we need pagination -->
	<div class="swiper-pagination"></div>

	<!-- If we need navigation buttons -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>

</div>

<div class="list">
	<a href="#" class="list__item cat-1 active" data-first="0">Cat 1</a>
	<a href="#" class="list__item cat-2" data-first="2">Cat 2</a>
	<a href="#" class="list__item cat-3" data-first="4">Cat 3</a>
</div>
.swiper-container {
	width: 600px;
}

.swiper-slide {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: navy;
}
.cat-1 {
	background: tomato;
}
.cat-2 {
	background-color: lightgreen;
}
.cat-3 {
	background: violet;
}
.list {
	display: flex;
	justify-content: center;
}

.list__item {
	padding: 10px;
	margin: 10px;
	transition: .3s;
	color: navy;
	text-decoration: none;
}

.list__item.active {
	transform: scale(1.3);
}































const mySwiper = new Swiper('.swiper-container', {
	loop: true,
	slidesPerView: 3,
	spaceBetween: 20,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
});

let arrayLinks = document.querySelectorAll('.list .list__item');

arrayLinks.forEach( (link)=>{
	let linkIndex = link.dataset.first;

	link.addEventListener('click', function(event) {
		event.preventDefault();
		removeActiveClass(arrayLinks);
		addActiveClass(link);

		// mySwiper.slideTo(linkIndex);
		mySwiper.slideToLoop(linkIndex);
	})
})

mySwiper.on('slideChange', function () {
	// console.log(this);
	// console.log(this.activeIndex);
	// console.log(this.realIndex);
	let realIndex = this.realIndex;
	arrayLinks.forEach( (link)=>{
		let linkIndex = link.dataset.first;
		if (linkIndex == realIndex) {
			removeActiveClass(arrayLinks);
			addActiveClass(link);
		}
	})
});

function removeActiveClass(array) {
	array.forEach( (el)=>{
		el.classList.remove('active');
	})
}
function addActiveClass(el) {
	el.classList.add('active');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.5/swiper-bundle.min.js