JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://cdn.bootcss.com/Swiper/4.0.1/css/swiper.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.0.1/js/swiper.min.js"></script>
<button class="btn">切换</button>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide bg1">Slide 1</div>
        <div class="swiper-slide bg2">Slide 2</div>
        <div class="swiper-slide bg3">Slide 3</div>
        <div class="swiper-slide bg4">Slide 4</div>
    </div>
    <div class="swiper-button-prev control"></div>
    <div class="swiper-button-next control"></div>
 </div> 
</div>

CSS

.swiper-container,.swiper-slide {
    width: 600px;
    height: 300px;
}  
.bg1{background:red;}
.bg2{background:blue;}
.bg3{background:yellow;}
.bg4{background:green;}

JavaScript

var swiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    noSwiping : true,
    spaceBetween: 10,
    slidesPerView: 3
  }) 
  
 $(".btn").click(function() {
  swiper.params.slidesPerView = 1;
  swiper.params.direction = 'vertical';
  swiper.slides.addClass('swiper-no-swiping');
  $('.control').hide();
  swiper.update();
 });