适用swiper实现轮播图效果

代码

<template>
  <div class="home-module">
    <!-- <HeaderModule :color='color' /> -->
    <div class="swiper-container" >
          <div class="swiper-wrapper">
                  <div class="swiper-slide" >
                            <div class="drainage-box">
                                    <div class="btn-box">
                                        <button class="connet-btn cur" @click="onGoto('UserCenter')">立即购买</button>
                                        <button class="control-btn cur" @click="onGoto('Profile')">管理控制台</button>
                                        <button class="jisuan cur" @click="hanldeRouter">价格计算器</button>
                                    </div>

                             </div>
                  </div>
                  <div class="swiper-slide" >
                   <div class="banner2"></div>
                  </div>
        </div>
</template>
<script>
  mounted () {
    /* eslint-disable */
    const mySwiper = new Swiper(".swiper-container", {
      // direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      // scrollbar: {
      //   el: '.swiper-scrollbar'
      // }
    });
  },
</script>
<style>
.banner2{
    background: no-repeat 100%/100% url("../../static/home/banner2.jpg");
    width: 100%;
    height: 536px
}
.drainage-box{
    background: no-repeat 100%/100% url("../../static/home/banner1.jpg");
    width: 100%;
    height: 536px
}
<style>