vue中使用swiper轮播方法

晴朗的天空来之不易
2021-3-18 / 0 评论 / 809 阅读 / 正在检测是否收录...

# vue中使用swiper轮播方法

  1. 安装swiper包
    npm install swiper
  1. 在官网复制相应轮播结构和样式

  2. 在vue模块中局部引入

     import Swiper from 'swiper'
    // import style (>= Swiper 6.x)
    import "swiper/swiper-bundle.css";
     export default {
         mounted(){
             let swiper = new Swiper('.swiper-container',{
                 autoplay:true,
                 loop:true
             })
         }
     }
  1. 在css中引入样式
    <style scoped>
        .swiper-container {
          width: 100%;
          height: 4.69rem; /* 300/64 */
        }
        .swiper-slide img{
            width: 100%;
            height: 100%
    
        }
    </style>

# 注意

  • swiper不建议全局引入,加载会变慢,哪里用到轮播哪里引用
0