swiper轮播图

第一步下载：swiper库

npm i swiper

全部的代码如下：

<template>
    <div id="app">

        <!-- swiper轮播图 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="https://gss0.bdstatic.com/70cFfyinKgQIm2_p8IuM_a/daf/pic/item/a8773912b31bb051ec146159397adab44aede08b.jpg" alt="">
                </div>
                 <div class="swiper-slide">
                    <img src="https://gss0.bdstatic.com/70cFfyinKgQIm2_p8IuM_a/daf/pic/item/a8773912b31bb051ec146159397adab44aede08b.jpg" alt="">
                </div>
                 <div class="swiper-slide">
                     <img src="https://gss0.bdstatic.com/70cFfyinKgQIm2_p8IuM_a/daf/pic/item/a8773912b31bb051ec146159397adab44aede08b.jpg" alt="">
                </div>
                 <div class="swiper-slide">
                     <img src="https://tpc.googlesyndication.com/simgad/17955358767017347840?sqp=4sqPyQQ7QjkqNxABHQAAtEIgASgBMAk4A0DwkwlYAWBfcAKAAQGIAQGdAQAAgD-oAQGwAYCt4gS4AV_FAS2ynT4&rs=AOga4ql7j96pXG8i7q5C_6pUV4DC4Y2EEg" alt="">
                </div>
                
                
            </div>
        </div>
        
        <div class="test">
            测试主页面
            <chldren1 v-model="msg"></chldren1>
            <p>父组件该的值{{msg}}</p>
            <button @click="fn">父组件该的值</button>
        </div>
          <Navgation></Navgation>
    </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import chldren1 from './children/index'
import Navgation from '@/components/Navigation'


export default {
      
    data(){
        return{
            msg:1,
          el:'#app',

        }
    },

    directives:{
        myAdmin:{
            inserted(el){
                console.log("el:",el)
            }
        }
    },
    mounted(){
    var swiper = new Swiper('.swiper-container',{
    autoplay:true，
    // 解决有数据，但轮播图不动的问题
    // 方法一
    observer:true,
    // 方法二
    // observeParents:true

})
    },
    methods: {

        
        fn(){
            this.msg+=1
        }
    },
    components:{
        Navgation,
        chldren1
    }
    
}
</script>
<style lang="less" scoped>
    .test{
        font-size: 16px;
    }
</style>