swiper轮播图的分页器显示在图片外面

Question

在编写Vue项目的时候使用swiper遇到了一个问题，迟迟不能解决

页面代码如下：

<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl"/>
      </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "HomeSwiper",
    data () {
    return {
      swiperOption: {
        pagination: {
        el:".swiper-pagination",
        clickable:true},
        //循环轮播
        loop: true,
        autoplay:true,
        speed:1000
      },
      swiperList:[{
          id:'0001',
          imgUrl:'https://img1.qunarzz.com/piao/fusion/1802/e3/62ce7362ca051d02.jpg_640x200_6db551b7.jpg'
      },{
          id:'0002',
          imgUrl:'https://img1.qunarzz.com/piao/fusion/1801/93/ce59d182aca07102.jpg_640x200_ba03d44c.jpg'
      }]
    };
  },
};
</script>
<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background: red
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.25%
    background: #eee
    .swiper-img
      width: 100%
</style>

Answer 1

调整下导航容器样式swiper-pagination内容

.wrapper >>> .swiper-pagination
    bottom: 20px