vue.js swiper example

Question

最简单的例子都跑不通，为什么slides都堆到一起了。。。求各位来看看

代码

<template>
  <div class="lasted-books">
    <div class="content">
      <div class="lasted-list">
        <div class="list-title">
          <p class="title-text">最新上架</p>
        </div>
        <swiper :options="swiperOptionIn" class="swiper-position">
          <swiper-slide>Slide 1</swiper-slide>
          <swiper-slide>Slide 2</swiper-slide>
          <swiper-slide>Slide 3</swiper-slide>
          <swiper-slide>Slide 4</swiper-slide>
          <swiper-slide>Slide 5</swiper-slide>
          <swiper-slide>Slide 6</swiper-slide>
          <swiper-slide>Slide 7</swiper-slide>
          <swiper-slide>Slide 8</swiper-slide>
          <swiper-slide>Slide 9</swiper-slide>
          <swiper-slide>Slide 10</swiper-slide>
          <div class="swiper-pagination-white swiper-pagination-position" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</div>
</template>

<script type="text/ecmascript-6">
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import { mapGetters } from 'vuex'
  export default {
    components: {
      swiper,
      swiperSlide
    },
    data () {
      return {
        swiperOptionIn: {
          centeredSlides:true,
          pagination: '.swiper-pagination-white',
          paginationClickable: true,
          slidesPerView:'auto',
          grabCursor : true,
        }
      }
    },
    computed: {
      ...mapGetters({
        bookList: 'books'
      })
    }
  }
</script>



<style scoped lang="less" rel="stylesheet/less">
  .lasted-books {
    margin-top: 50px;
    .content {
      .lasted-list {
        background: #fff;
        margin-top: 10px;
        box-shadow: 0 0 10px #DDD;
        .list-title {
          height: 50px;
          text-align: center;
          line-height: 50px;
        }

        .swiper-position {
          position: relative;
          cursor: pointer;
          .swiper-slide {
            width:100%;
            display: flex;
            text-align:center;
            font-size:28px;
            justify-content:center;
            align-items:center;
            background:#F2F2F2;
          }
        }
        .swiper-pagination-position {
          position: absolute;
          z-index: 1;
          display: flex;
          flex-direction: row;
          justify-content: center;
        }

      }
    }
  }

Answer 1

.swiper-slide {
这个前面没有点吧，应该是一个html标签。。