Есть такой код с кастомной пагинацией для слайдера
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>
<body>
<!-- Swiper -->
<div class="swiper-container timeline-dates">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>1949</div>
</div>
<div class="swiper-slide">
<div>1954</div>
</div>
<div class="swiper-slide">
<div>1965</div>
</div>
<div class="swiper-slide">
<div>1968</div>
</div>
<div class="swiper-slide">
<div>1974</div>
</div>
<div class="swiper-slide">
<div>1986</div>
</div>
<div class="swiper-slide">
<div>1995</div>
</div>
<div class="swiper-slide">
<div>2005</div>
</div>
<div class="swiper-slide">
<div>2011</div>
</div>
<div class="swiper-slide">
<div>2018</div>
</div>
</div>
</div>
<div class="swiper-container timeline-contents">
<div class="swiper-wrapper">
<div class="swiper-slide">
<h5>Lorem ipsum dolor sit amet</h6>
<p>Donec vitae nibh nunc. Quisque in rhoncus augue. Nam eleifend in ligula volutpat vestibulum. Morbi sodales congue odio, ac ornare sem sagittis pharetra. Praesent ullamcorper nisi ut lectus bibendum, eleifend commodo nibh gravida. Donec volutpat
porttitor vehicula. Aenean consequat, dui vitae sagittis consectetur, risus nulla lacinia elit, quis aliquam risus est at lectus. In quis luctus lectus, ac mattis felis. Integer non feugiat diam. Aenean ut turpis bibendum, imperdiet mauris
a, dictum enim. Ut sed lacus posuere libero dignissim finibus. Nulla et eros bibendum, congue justo ut, interdum neque. In laoreet placerat pretium. Praesent sed libero nec arcu tincidunt efficitur vestibulum nec erat.</p>
</div>
<div class="swiper-slide">
<h5>Sed ultrices magna lorem</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet augue metus, ut ultrices ex euismod vel. Morbi accumsan condimentum dictum. Ut sed mi nec tortor accumsan iaculis sed vel urna. Curabitur pharetra, nunc a volutpat ultrices,
quam mi congue diam, ac mollis ante felis ac eros. Nunc varius ut sapien at ornare. Etiam pellentesque magna quis est lacinia, in tempor massa tempor. Mauris condimentum nisi sed ligula ultricies, vitae tempus enim auctor. Integer et diam
condimentum, pulvinar risus eu, lacinia tortor. Phasellus nisi felis, bibendum in mauris a, varius congue diam. Proin semper massa lacus, tempus placerat nisl consequat id. Maecenas scelerisque consequat dapibus.</p>
</div>
<div class="swiper-slide">
<h5>Pellentesque nec ligula lectus</h6>
<p>Phasellus quis laoreet arcu. Integer fringilla pellentesque arcu vel malesuada. Vestibulum vel venenatis arcu, eget ullamcorper ante. Sed bibendum laoreet sapien vitae scelerisque. Donec id mollis erat. Fusce at diam consectetur lorem gravida
fringilla in ac sem. Ut in ipsum at enim commodo vestibulum sed vitae lectus. Praesent libero mi, elementum a tortor quis, suscipit pretium magna. Curabitur nec bibendum orci. Donec dapibus malesuada lorem vitae tincidunt.</p>
</div>
<div class="swiper-slide">
<h5>Praesent accumsan vulputate fermentum</h6>
<p>Donec nulla ex, feugiat sed felis ut, dapibus dapibus urna. Morbi placerat id arcu vitae egestas. Ut lorem lacus, dignissim elementum nunc sit amet, convallis placerat purus. Nunc laoreet id felis et mollis. Nam id magna eu mi convallis euismod.
Quisque suscipit a erat at vestibulum. Donec convallis nisi quis pretium elementum. Phasellus massa sem, molestie sit amet dui eu, bibendum ornare velit. Curabitur porttitor egestas enim, vel pretium eros. Sed feugiat mi lorem, nec porttitor
massa ornare ut. Phasellus vitae bibendum libero. Duis sed odio ex. In in nisl mi. Phasellus vitae auctor dolor, ut pretium nisi. Fusce consequat dolor quis mi eleifend blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae.</p>
</div>
<div class="swiper-slide">
<h5>Donec sed erat fermentum</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices magna lorem, vel scelerisque sapien blandit ac. Pellentesque nec ligula lectus. Praesent accumsan vulputate fermentum. Donec sed erat fermentum, porttitor justo quis, pretium
dui. Sed pellentesque, enim in euismod hendrerit, velit nisi scelerisque eros, eleifend vehicula ante sem sed lorem. Phasellus nulla nisl, tristique vel ipsum cursus, pellentesque gravida odio. Morbi efficitur sit amet nunc eu vulputate. Donec
non interdum dui.</p>
</div>
<div class="swiper-slide">
<h5>Lorem ipsum dolor sit amet</h6>
<p>Donec vitae nibh nunc. Quisque in rhoncus augue. Nam eleifend in ligula volutpat vestibulum. Morbi sodales congue odio, ac ornare sem sagittis pharetra. Praesent ullamcorper nisi ut lectus bibendum, eleifend commodo nibh gravida. Donec volutpat
porttitor vehicula. Aenean consequat, dui vitae sagittis consectetur, risus nulla lacinia elit, quis aliquam risus est at lectus. In quis luctus lectus, ac mattis felis. Integer non feugiat diam. Aenean ut turpis bibendum, imperdiet mauris
a, dictum enim. Ut sed lacus posuere libero dignissim finibus. Nulla et eros bibendum, congue justo ut, interdum neque. In laoreet placerat pretium. Praesent sed libero nec arcu tincidunt efficitur vestibulum nec erat.</p>
</div>
<div class="swiper-slide">
<h5>Sed ultrices magna lorem</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet augue metus, ut ultrices ex euismod vel. Morbi accumsan condimentum dictum. Ut sed mi nec tortor accumsan iaculis sed vel urna. Curabitur pharetra, nunc a volutpat ultrices,
quam mi congue diam, ac mollis ante felis ac eros. Nunc varius ut sapien at ornare. Etiam pellentesque magna quis est lacinia, in tempor massa tempor. Mauris condimentum nisi sed ligula ultricies, vitae tempus enim auctor. Integer et diam
condimentum, pulvinar risus eu, lacinia tortor. Phasellus nisi felis, bibendum in mauris a, varius congue diam. Proin semper massa lacus, tempus placerat nisl consequat id. Maecenas scelerisque consequat dapibus.</p>
</div>
<div class="swiper-slide">
<h5>Pellentesque nec ligula lectus</h6>
<p>Phasellus quis laoreet arcu. Integer fringilla pellentesque arcu vel malesuada. Vestibulum vel venenatis arcu, eget ullamcorper ante. Sed bibendum laoreet sapien vitae scelerisque. Donec id mollis erat. Fusce at diam consectetur lorem gravida
fringilla in ac sem. Ut in ipsum at enim commodo vestibulum sed vitae lectus. Praesent libero mi, elementum a tortor quis, suscipit pretium magna. Curabitur nec bibendum orci. Donec dapibus malesuada lorem vitae tincidunt.</p>
</div>
<div class="swiper-slide">
<h5>Praesent accumsan vulputate fermentum</h6>
<p>Donec nulla ex, feugiat sed felis ut, dapibus dapibus urna. Morbi placerat id arcu vitae egestas. Ut lorem lacus, dignissim elementum nunc sit amet, convallis placerat purus. Nunc laoreet id felis et mollis. Nam id magna eu mi convallis euismod.
Quisque suscipit a erat at vestibulum. Donec convallis nisi quis pretium elementum. Phasellus massa sem, molestie sit amet dui eu, bibendum ornare velit. Curabitur porttitor egestas enim, vel pretium eros. Sed feugiat mi lorem, nec porttitor
massa ornare ut. Phasellus vitae bibendum libero. Duis sed odio ex. In in nisl mi. Phasellus vitae auctor dolor, ut pretium nisi. Fusce consequat dolor quis mi eleifend blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae.</p>
</div>
<div class="swiper-slide">
<h5>Donec sed erat fermentum</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices magna lorem, vel scelerisque sapien blandit ac. Pellentesque nec ligula lectus. Praesent accumsan vulputate fermentum. Donec sed erat fermentum, porttitor justo quis, pretium
dui. Sed pellentesque, enim in euismod hendrerit, velit nisi scelerisque eros, eleifend vehicula ante sem sed lorem. Phasellus nulla nisl, tristique vel ipsum cursus, pellentesque gravida odio. Morbi efficitur sit amet nunc eu vulputate. Donec
non interdum dui.</p>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper_date = new Swiper('.timeline-dates', {
slidesPerView: 4,
spaceBetween: 30,
centeredSlides: true,
slideToClickedSlide: true,
navigation: {
nextEl: '.timeline-button-next',
prevEl: '.timeline-button-prev',
},
});
var swiper_info_date = new Swiper('.timeline-contents', {
allowTouchMove: false
});
swiper_date.controller.control = swiper_info_date;
</script>
</body>
</html>
Нашел рабочий вариант как сделать такой слайдер, через 2 и общее управление для них. Как сверстать верхнюю часть с датами как по ссылке.(хотя бы примерно). Хочу сделать слайдер на подобии того что тут http://www.omskcarbongroup.com/company/ Подскажите как правильно такой сделать