JSFiddle - React, Tailwind, and code Playground

by Park Mino

HTML

<script type="text/javascript" src="//image.oliveyoung.co.kr/mc-static-root/js/common/publish/swiper.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
  <div class="swiper-slide" data-hash="slide1"><img src="https://image.oliveyoung.co.kr/uploads/images/display/90000010012/91/8806353257703663119.jpg"></div>
  <div class="swiper-slide" data-hash="slide2"><img src="https://image.oliveyoung.co.kr/uploads/images/display/90000010012/91/2263500973988330226.jpg" data-original="https://image.oliveyoung.co.kr/uploads/images/display/90000010012/91/2263500973988330226.jpg" ></div>
</div>
<div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev">이전</div>
  <div class="swiper-button-next">다음</div>
</div>

<button id="move">이동하자</button>

CSS

.swiper-container {position:relative;overflow:hidden;z-index:1;-webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform;-o-transition-property: -o-transform;-ms-transition-property: -ms-transform;transition-property: transform}
.swiper-wrapper{position:relative;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform;-o-transition-property: -o-transform;-ms-transition-property: -ms-transform;transition-property: transform;-webkit-transition-timing-function: ease-out;-moz-transition-timing-function: ease-out;-ms-transition-timing-function: ease-out;-o-transition-timing-function: ease-out;transition-timing-function: ease-out}
.swiper-wrapper {display:block;display:-webkit-box;display:-moz-box;display:-ms-flexbox;}
img{width:100%}
.swiper-pagination .swiper-pagination-bullet {display:inline-block;width:5px;height:5px;padding:0;margin-left:5px;font-size:0px;line-height:0;text-indent:-9999px;background-color:blue}
.swiper-pagination .swiper-pagination-bullet-active {width:20px;background-color:red}

JavaScript

var mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  pagination: '.swiper-pagination',
}); 

$('#move').on('click', function(){
	mySwiper.slideTo(2,400,false);
});