• 技术文章 >web前端 >Vue.js

    vue.js有轮播图插件吗?

    青灯夜游青灯夜游2020-11-20 14:43:19原创53

    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/

    1.png

    注意版本变化

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

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

    更多编程相关知识,请访问:编程课程!!

    以上就是vue.js有轮播图插件吗?的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:vue.js 轮播图插件
    上一篇:基于vue移动端UI框架有哪些? 下一篇:vue开发必须要搭脚手架么?
    第14期线上培训班

    相关文章推荐

    • thinkphp5.1和php、vue.js实现前后端分离和交互• vue.js有哪些ui框架?• vue.js中怎么引入组件• vue.js怎么获取class• vue计算属性和watch的区别有哪些?

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网