成都网站建设设计

将想法与焦点和您一起共享

vue2.0如何使用swiper实现轮播广告功能-创新互联

小编给大家分享一下vue2.0如何使用swiper实现轮播广告功能,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

创新互联是一家网站设计、网站制作,提供网页设计,网站设计,网站制作,建网站,按需定制开发,网站开发公司,公司2013年成立是互联行业建设者,服务者。以提升客户品牌价值为核心业务,全程参与项目的网站策划设计制作,前端开发,后台程序制作以及后期项目运营并提出专业建议和思路。

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)

看完了这篇文章,相信你对vue2.0如何使用swiper实现轮播广告功能有了一定的了解,想了解更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道,感谢各位的阅读!


网页题目:vue2.0如何使用swiper实现轮播广告功能-创新互联
网站URL:http://chengdu.cdxwcx.cn/article/djcjis.html