如何在vue中插入swiper

 

1. 下载并使用依赖包 swiper vue-awesome-swiper与swiper@5以快速简洁的创建组件

   npm i swiper vue-awesome-swiper  swiper@5

    

2. 引入swiper.css与swiper文件

    import 'swiper/css/swiper.css'
       import Swiper from 'swiper';

        3通过Swiper对象函数 绑定操纵对象并对对象下元素进行轮播并通过swiper.css与less文件快速创建组件css样式,代码如下

 

<template>
        <div id="swipercom">
            <div class="swiper-container" id="swiperIndex">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,i) in imgs" :key="i">
                        <img :src="item.pic" alt="">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
</template>

<script>
    import 'swiper/css/swiper.css'
    import  Swiper from 'swiper'
export default {
  name: 'HelloWorld',
    data(){
        return {
            imgs: [
                {pic: require('../assets/banner1.gif')},
                {pic: require('../assets/banner2.jpg')},
                {pic: require('../assets/banner3.jpg')}
            ]
        }
    },
    mounted() {//view与model绑定成功之前与绑定成功之后
        var mySwiper = new Swiper('#swiperIndex', {
            //配置分页器内容
            pagination: {
                el: ".swiper-pagination",//分页器与哪个标签相关联
                clickable: true //分页器是否可以点击
            }
        })
    }


}
</script>



    #swipercom{
        width: 100%;
        height: 100px;
    }
    .swiper-slide img {
        width: 100%;

          }

</style>

 

   4最后呈现效果