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
立即学习“前端免费学习笔记(深入)”;
安装:
npm install vue-awesome-swiper --save
导入使用:
// 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/
注意版本变化
starting with version 2.6.0, you need to manually introduce swiper's css
import 'swiper/dist/css/swiper.css'
更多编程相关知识,请访问:编程课程!!
以上就是vue.js有轮播图插件吗?的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号