首页 > 教程 > 文章 > VUE > 正文

vue.js有轮播图插件吗?

原创2021-06-29 11:08:50 0 6

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有轮播图插件吗?》的详细内容,更多请关注 “设计者在线”其它相关文章!

  • 相关标签:Vue.js轮播图插件
  • 本文由 设计者在线 原创发布,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论 条评论
  • 专题推荐

    • 帝国系统

      简介:抗击新型冠状病毒感染肺炎

    • JQUERY

      简介:春节好春节好春节好春节好春节好春节好春节好春节好

    • 不忘初心牢记使命教育活动

      简介:不忘初心牢记使命教育活动

    • 我们的生活

      简介:我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活

    • 明天会更好

      简介:明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好

    推荐视频教程
    视频分类
    [!--date--]Y-m-d[!--date--]