vue2.0使用swiper组件实现轮播的示例代码-成都快上网建站

vue2.0使用swiper组件实现轮播的示例代码

1、安装swiper

创新互联自成立以来,一直致力于为企业提供从网站策划、网站设计、成都网站建设、成都网站设计、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

npm install swiper@3.4.1 --save-dev

2、引用组件

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

3、html页面代码

4、初始化组件,并设置参数

 setTimeout(function () {
  state.swiperObj = new Swiper('#swiper', {
  loop: true,
  pagination: '.swiper-pagination',
  autoplay: 2000,
  paginationClickable: true
  });
 }, 100)

5、搞定,ok

以上这篇vue2.0使用swiper组件实现轮播的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。


本文名称:vue2.0使用swiper组件实现轮播的示例代码
网页地址:http://kswjz.com/article/jcidce.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流