Vue框架里使用Swiper的方法示例

这篇文章主要介绍了Vue框架里使用Swiper的方法示例,luxessed.com觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随luxessed.com过来看看吧

下载swiper

首先使用npm 或者cnpm下载swiper

cnpm install swiper

引入swiper

import Swiper from ‘swiper'; import ‘swiper/dist/css/swiper.min.css';

使用swiper

mounted(){ var mySwiper = new Swiper('.swiper-container', { autoplay:true, loop:true }) },

注意

如果想要从后台请求图片放上去 new Swiper要写在网络请求成功的函数里面,否则不会出来数据。

slider组件的内容如下:

解释一下:autoplay:true这样可以解决不自动轮播问题。如果想设置滚动的时间,用speed设置相应时间即可。direction可以设置轮播的方向。具体的参数可参考swiper的官网地址:http://www.swiper.com.cn/api/Effects/2015/0308/193.html

以上就是Vue框架里使用Swiper的方法示例的详细内容,更多请关注luxessed.com其它相关文章!

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益 请一个月内联系我们,我们将配合处理!

原文地址:Vue框架里使用Swiper的方法示例发布于2022-11-18 13:55:01