最近有一个项目，要实现轮播，而且轮播的其中两项是（其中两个swiper-slide）的内容比较多，官网也有示例，我的也是依照官网的，基本一样
1.下载（通过NPM获取Swiper）

npm install swiper

2.按需引入（我这里没有在main.js添加，在需要的页面添加,不知道是不是我在文件下载了vue-awesome-swiper）

import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'

<template>
  <div id="PcTest">
    <div class="swiper-container" id="swiper-container1">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">
          <div class="swiper-container" id="swiper-container2">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <h4>一段很长的内容</h4>
                <p style="opacity:0.99;">
                  一
                  <br />段
                  <br />很
                  <br />长
                  <br />的
                  <br />内
                  <br />容
                </p>
                <p style="opacity:0.98;">
                  一
                  <br />段
                  <br />很
                  <br />长
                  <br />的
                  <br />内
                  <br />容
                </p>
                <p style="opacity:0.97;">
                  一
                  <br />段
                  <br />很
                  <br />长
                  <br />的
                  <br />内
                  <br />容
                </p>
              </div>
            </div>
            <div class="swiper-scrollbar"></div>
          </div>
        </div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  data () {
    return {
      mySwiper1: null,
      mySwiper2: null
    }
  },
  mounted () {
    this.mySwiper1 = new Swiper('#swiper-container1', {
      direction: 'vertical',
      pagination: { el: '.swiper-pagination', clickable: true }
    })
    this.mySwiper2 = new Swiper('#swiper-container2', { // 子swiper
      direction: 'vertical',
      nested: true,
      // resistanceRatio: 0,
      slidesPerView: 'auto',
      freeMode: true,
      scrollbar: { el: '.swiper-scrollbar' }
    })
  }
}
</script>
<style lang="less" scoped>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    #PcTest {
        width: 100%;
        height: 100vh
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
    }
#swiper-container2 .swiper-slide {
font-size: 18px;
height: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display:block;
line-height:100px;
background: #4390EE;
color: #fff;
}
</style>

PcTest 选择器那里的高度写100vh，不能写100%，我试验的时候如果写100%，不生效，我的vue项目使用的是less。