SOURCE

 <div class="swiper-pagination-box md">
    <div class="swiper-pagination"></div>
 </div>

 <div class="swiper-pagination-box lg">
    <div class="swiper-pagination"></div>
 </div>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
     <div class="swiper-slide">slider3</div>
      <div class="swiper-slide">slider3</div>
  </div>
</div>

<style>
    html,body{
        height:100%;
    }
    .swiper-pagination-box{
        display: flex;
        position:absolute;
        justify-content: flex-end;
        align-items:center;
        background-color:blue;
    }
    .lg{
        height:100%;
        right:0;
    }
    .swiper-pagination{
        display: flex;
        flex-flow: column;
    }
    .swiper-pagination li{
        margin-top:30px;
        background-color:red;
    }

     .swiper-pagination li{
         width:30px;
         height:30px;
     }
    .swiper-pagination li:nth-child(1){

    }
    .md{
        width:100%;
        justify-content: center;
        align-items:center;
    }
    .md .swiper-pagination{
        flex-flow: row;
    }
    .swiper-container{
        height:100%;
        width:100%;
    }
    .swiper-slide{
        height:100%;
        width:100%;
    }
</style>

<script> 
var mySwiper = new Swiper('.swiper-container', {
    direction:"vertical",
	autoplay: 2000,//可选选项，自动滑动
    autoplayDisableOnInteraction : false,
    mousewheelControl : true,
    pagination:'.swiper-pagination',
    paginationClickable :true,
    paginationBulletRender:function (swiper, index, className){
        return '<li class="' + className + '">' + (index + 1) + '</li>';
    }
});

</script>