Swiper bidirectional sliders

HTML

<!DOCTYPE html>
<html>
<head>
	<title>DemoSlide</title>
	<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
	<style type="text/css">
.swiper-container {
    width: 100vw;
    height: 150px;
}
.swiper-slide {
	background: #bbb
} 
html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}
	</style>
</head>
<body>

<div class="swiper-container row-top">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
    </div>

</div>

<div class="swiper-container row-bottom">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
    </div>

</div>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script type="text/javascript">
var swiper = new Swiper('.row-top', {
    // Disable preloading of all images
    freeMode: true,
    slidesPerView: 4,
    preloadImages: true,
    // Enable lazy loading

    lazy: true,
    loop: true,
  	mousewheel: {
    	invert: true,
    	eventsTarget: 'body'
  	},
});
var swiper = new Swiper('.row-bottom', {
    // Disable...