vue最易理解且详细的调用swiper插件

我们最开始接触的是在操作dom时候的时候引入swiper,那么这次我就用之前的文档来教你在vue中如何调用swiper.

我们之前看的是swiper教程vue最易理解且详细的调用swiper插件_第1张图片

那么我根据上面的教程一步一步来教你使用

1.首先创建好swiper组件.写好template 里面的标签内容(当然这里写了个插槽为了以后方便动态插入轮播的内容),你直接复制教程里的代码就好了


4.我们的swiper组件就配置好了,那么我们只要引入swiper组件进入我们的根组件下了.轮播图就能运转了. 我这里为了美观些把

 
又当成组件封装了起来.所以这个项目是一根两件.但是你template要是直接复制教程里的话恭喜你,你的轮播就可以运转了.后面是为了模仿真实情况,动态插入轮播图的话就继续看下去.

根主件





第二个组件



你可能感兴趣的:(vue.js,javascript,前端)