JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/css/swiper.min.css">
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique libero reprehenderit facilis. Pariatur illum repellat distinctio consectetur, minima ad aspernatur odio et obcaecati a unde, accusamus architecto minus, dicta consequatur!</p>
            <p>Illo laboriosam deserunt a quas tempore perspiciatis voluptates dignissimos sunt accusamus, quod quae pariatur impedit rerum, saepe, mollitia cum error consectetur officiis ipsum beatae ut. Eveniet, maxime provident? Mollitia, ullam.</p>
            <p>Nesciunt magni, voluptatum omnis, assumenda maiores harum vel ipsa illo nostrum a non quos optio repellat tenetur ducimus dolorem placeat! Minima cum, animi ullam asperiores qui modi perferendis, earum quis!</p>
            <p>Sint unde corporis, quia ducimus reprehenderit nostrum facilis itaque temporibus corrupti. Explicabo et illo itaque sequi placeat eos architecto, sed accusantium nostrum nihil autem impedit obcaecati voluptatum minima quidem saepe.</p>
            <p>Facilis in aliquam incidunt magni! Neque eos consequatur recusandae sint labore perspiciatis deleniti commodi beatae eveniet omnis, itaque expedita voluptates facere rerum distinctio, aperiam dolores totam doloremque corrupti vitae quibusdam!</p>
            <p>Nemo natus laudantium iusto harum vero praesentium earum rerum corporis pariatur, voluptas, doloribus ipsa vitae assumenda maxime cum magni cumque alias amet laborum libero hic. Eaque accusamus, ipsa assumenda. Dolores.</p>
            <p>Fuga minima perferendis deleniti sed repellendus totam suscipit. Aspernatur laboriosam debitis nisi harum in. Harum, ipsa consequuntur sequi natus, esse quod quaerat qui eligendi nulla iusto...

CSS

body, html {
    padding: 0;
    margin: 0;
    position: relative;
    height: 100%;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    background: #f1f1f1;
    color:#000;
    text-align: center;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

JavaScript

var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
});
var startScroll, touchStart, touchCurrent;
swiper.slides.on('touchstart', function (e) {
    startScroll = this.scrollTop;
    touchStart = e.targetTouches[0].pageY;
}, true);
swiper.slides.on('touchmove', function (e) {
    touchCurrent = e.targetTouches[0].pageY;
    var touchesDiff = touchCurrent - touchStart;
    var slide = this;
    var onlyScrolling = 
            ( slide.scrollHeight > slide.offsetHeight ) &&
            (
                ( touchesDiff < 0 && startScroll === 0 ) ||
                ( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) ||
                ( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) )
            );
    if (onlyScrolling) {
        e.stopPropagation();
    }
}, true);