vue 轮播图

 

一：要想写出轮播图的效果，第一步肯定是要先安装一个swiper插件

   (我用的webStrome工具开发的)在终端里面属于命令:npm install swiper --回车(这个时候可能会出现报错，想要解决那个错误的话，把项目里面的node_modules文件删除掉，重新安装一下依赖包就可以了：npm   install)

二：这个时候你的插件已经安装好了，第二步做的就是在main.js文件中引入  import 'swiper/dist/css/swiper.min.css'

三：在写轮播的页面里面应用swiper插件(我把所有的插件都统一放到了components文件下面)

        import  swiper from '@/components/swiper'         

       components:{swiper}

四：接下来就是页面的代码

      <div class="swiper-container">

                <div class="swiper-wrapper">

                    <img src="../../assets/1.png"></img>   

              </div>

             <div class="swiper-wrapper">

                    <img src="../../assets/2.png"></img>   

            </div>

           ...............（可以多放几张图片的）

     </div>

五：关于样式的话，当时写了很多但是觉得都用不到，就只写的最外层的样式和图片的宽高，

六：轮播图的核心都在这里了，轮播嘛，就是要让它动起来的嘛

    像这些样式的东西啊，只需要放在mounted方法里面就好了

var  mySwiper = new swiper("swiper-container",{

        direction:-horiZontal-,

       autoplay:true,

       slideperView:auto,

       loop:true,

      centeredSlides:true,

     spaceBetween:9,

     loopAdditional-slides:100,

})