JSFiddle - React, Tailwind, and code Playground

by LOOnny

HTML

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="aside">
  <ul class="aside__list">
    <li class="aside__link" data-number="0">Про проект</li>
    <li class="aside__link" data-number="1">Послуги</li>
    <li class="aside__link" data-number="2">Портфолио</li>
    <li class="aside__link" data-number="3">Контакты</li>
  </ul>
</div>


<div id="slider" class="wrap">
  <div class="swiper-wrapper">
    <section class="services item swiper-slide">
      <div class="container">
        <h3><span>1</span> item 1 item 1 item</h3>
      </div>
    </section>

    <section class="services item swiper-slide">
      <div class="container">
        <h3><span>2</span> item 2 item 2 item</h3>
      </div>
    </section>

    <section class="services item swiper-slide">
      <div class="container">
        <h3><span>3</span> 3 item 3 item</h3>
      </div>
    </section>

    <section class="services item swiper-slide">
      <div class="container">
        <h3><span>4</span> итем4 item 4 item</h3>
      </div>
    </section>
  </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background-color: #eee;    
  font-family: Segoe UI;
}

.item {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  padding: 30px;
}

.aside {
  position: fixed;
  z-index: 55;
  left: 0px;
  width: 126px;
  height: 100%;
  background-color: #fff;
}

.aside__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.aside__link {
  margin: 22px 0;
  cursor: pointer;
  padding: 0 20px;
}

.aside__link--active {
  color: red;
}

#slider {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 126px;  
  overflow: hidden;
}

#slider .items {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 126px;
  display: flex;
  transition: transform 0.25s;    
}

JavaScript

const asideList = document.getElementsByClassName('aside__list')[0],
      asideListItems = asideList.children,
      activeItemClass = 'aside__link--active';

const swiper = new Swiper('#slider', {
  direction: 'horizontal',
  loop: false,
  on: {
    init: function(e) {
   		asideListItems[e.realIndex].classList.add(activeItemClass)      
    }
  },
  mousewheel: true,
  freeMode: true
});

swiper.on('activeIndexChange', function(e) {
	asideListItems[e.previousIndex].classList.remove(activeItemClass)
  asideListItems[e.realIndex].classList.add(activeItemClass)
});

asideList.onclick = event => {
	if (event.target.tagName !== 'LI') return;
  
  let number = +event.target.dataset.number;
  
  swiper.slideTo(number)
}