这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper

介绍

在Web网页开发中,我们经常需要用到图片轮播,在以往传统的开发方式中有很多基于jquery的插件可供使用,但是随着目前各类前端框架层出不穷的现状,在某些方面特别是针对特定的场景,还是有不少地方不太完善,今天就像大家介绍一个优雅的图片轮播插件——Vue-Awesome-Swiper,基于 Swiper4、适用于 Vue 的轮播组件,支持服务端渲染和单页应用,且可用于移动端和PC端。


这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper

Github

目前在Github上已经收获了8.8k的stars,可见其还是非常受欢迎的,可能也有不少小伙伴用过它!

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

安装

1、cdn

<link rel="stylesheet" href="path/to/swiper/dist/css/swiper.css"/><script type="text/javascript" src="path/to/swiper.js"></script><script type="text/javascript" src="path/to/vue.min.js"></script><script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script><script type="text/javascript">  Vue.use(window.VueAwesomeSwiper)</script>

2、npm

npm install vue-awesome-swiper --save

3、全局使用

import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default global options } */)

4、组件使用

// require stylesimport 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {  components: {    swiper,    swiperSlide  }}

5、ssr

// If used in nuxt.js/ssr, you should keep it only in browser build environmentif (process.browser) {  const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')  Vue.use(VueAwesomeSwiper)}

6、插件

import Swiper from 'swiper'Swiper.use({  name: 'pluginName',  params: {    pluginSwitch: false,  },  on: {    init() {      if (!this.params.pluginSwitch) return      console.log('init')    },    // swiper callback...  }})

预览

  • 默认方式

鼠标点击滑动左右切换

这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • Navigation ( 按钮切换 )

按钮切换

这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 分页器
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 分页器/动态指示点
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 进度条指示器
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 分页指示器
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 自定义指示器
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 滚动条
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 垂直切换
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 指示器之间设置间隙
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 多个轮播图
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 自定义
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • Slides居中
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 居中加自适应
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 贴边
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 内容滚动可拖动
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 多个分布
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 水平垂直可嵌套
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 3D方块切换
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 3D滚动切换
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 缩略图
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 延迟加载
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 放大
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
  • 侧滑菜单
这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper

总结

以上展示的效果是可静态图展示,实际上动图展示效果更加,因此建议直接查看官方Demo,中文文档,Vue-Awesome-Swiper的动态效果很多,我相信一定有一款适合你的项目,enjoy it!

版权声明:飞鱼 发表于 2020-07-19 11:39:39。
转载请注明:这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper | HelloWorld.La

暂无评论

暂无评论...