vue.js有轮播图插件吗？

PHP中文网 JavaScript

本文摘自PHP中文网，作者青灯夜游，侵删。

vue.js有轮播图插件，例如vue-concise-slider，它是基于Swiper4、适用于Vue的轮播组件，支持服务端渲染和单页应用；vue-awesome-swiper配置简单，支持自适应/全屏+按钮+分页，同时兼容移动和PC端。

vue.js轮播图插件vue-awesome-swiper

vue-awesome-swiper是基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。

vue-awesome-swiper是基于swiper的，安装不同版本的vue-awesome-swiper对应不同的swiper，所以swiper里面的属性多数能应用到vue-awesome-swiper中，也可以根据swiper文档来设置vue-awesome-swiper属性；

swiper官方文档：https://www.swiper.com.cn/api/index2.html

安装：

1

npm install vue-awesome-swiper --save

导入使用：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

// import

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

 

// mount with global

Vue.use(VueAwesomeSwiper)

 

// mount with component

import { swiper, swiperSlide } from 'vue-awesome-swiper'

  

export default {

  components: {

    swiper,

    swiperSlide

  }

}

案例展示及示例代码：

https://surmon-china.github.io/vue-awesome-swiper/

1.png

注意版本变化

starting with version 2.6.0, you need to manually introduce swiper's css

1

import 'swiper/dist/css/swiper.css'

更多编程相关知识，请访问：编程课程！！

以上就是vue.js有轮播图插件吗？的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

vue.js为什么要用谷歌浏览器

webstorm怎样新建vue.js的项目

vue.js去哪下载

vue.js如何使用filter

vue.js生命周期函数有什么作用

如何用npm安装vue.js？

vue.js如何做到seo

vue.js如何上传文件

vue.js有什么特点

vue.js怎么判断对象为空

更多相关阅读请进入《vue.js》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...