单个slide里有水平滚动的div，怎么滚动

czfangdown

代码举例
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="pic">
       <img src="xxxx.png" alt="">
       <img src="xxxx.png" alt="">
       <img src="xxxx.png" alt="">
       <img src="xxxx.png" alt="">
       <img src="xxxx.png" alt="">
     </div>
</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
        autoplay: 5000,//可选选项，自动滑动
})

比如这个页面 pic这个div里有5张图片，宽度超过slide的宽度，需水平滚动，设置overflow-x：auto后，向右滑动，直接切换到了slide2页面了，请问如何才能在slide页面实现水平滚动呢