vue使用swiper插件

258 阅读1分钟

请观赏

1.下载cnpm install swiper --save
2.组件中引入swiper以及样式
    import Swiper from "swiper"; 
    import "swiper/css/swiper.min.css";
    import "swiper/js/swiper.min.js";
3.使用
     mounted(){
       
        var myswiper=new Swiper("swiper-container",{
                autoplay:{
                            delay:1500
                        },
                loop:true,
                observer:true,  //修改swiper自己或子元素时,自动初始化swiper
                observeParents:true,//修改swiper的父元素时,自动初始化swiper
                pagination:{
                            el:".swiper-pagination"
                        },
                navigation:{
                    nextEl:".swiper-button-next",
                    prevEl:".swiper-button-prev"
                }
        });
    },
4.显示
    <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in datalist" :key="index">
                    <img :src="item.img" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
    </div>