JSFiddle - React, Tailwind, and code Playground

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

JavaScript

let swiper;

function swiperInit() {
  if (window.innerWidth >= 740) {

     swiper = new Swiper('#slider', {
      direction: 'horizontal',
      loop: false,
      mousewheel: true
    });

  } else {
    swiper.destroy();
  }
}

swiperInit();