使用swiper设计移动端轮播图（https://www.swiper.com.cn/）

Vue中利用swiper实现移动端轮播图效果

 

一：安装swiper模块

npm i swiper --save

 

二：组件vue中引入css文件和swiper模块

import Swiper from "swiper";

import "node_modules/swiper/dist/css/swiper.css"

 

三：组件中html代码：

<template>
    <div class="lunbo">
        <ul class="swiper-wrapper">
            <li class="swiper-slide" v-for="item in billboards" :key="item.id">
              <img :src="item.imageUrl" />
            </li>
        </ul>
    </div>
</template>

 

四：组件vue中script标签中创建swiper实例

<script>
import Swiper from "swiper";
import "node_modules/swiper/dist/css/swiper.css"
export default {
    data(){
        return {
            billboards:[
                {
                    id : 1,
                    imageUrl : './img/one.jpg'
                },
                {
                    id : 2,
                    imageUrl : './img/two.jpg'
                },
                {
                    id : 3,
                    imageUrl : './img/three.jpg'
                }
            ]
        }
    },
    mounted(){
        new Swiper('.lunbo',{  //目的是获取dom更新后的.lunbo节点
             loop:true,
              autoplay: {
               disableOnInteraction: false,//手动触发后还能自动播放
               delay:3000  //3秒切换
            }
        })
    }
}
</script>