平武建站

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://pwwzsj.com/article/jcidce.html

其他资讯