使用swiper轮播图插件

最新推荐文章于 2025-04-10 07:45:00 发布

街角的守护i

最新推荐文章于 2025-04-10 07:45:00 发布

阅读量352

点赞数

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/m0_37820004/article/details/105343583

版权

本文详细介绍如何在Vue项目中安装并使用Swiper轮播组件，包括全局和局部注册方法，以及必要的样式引入步骤。Swiper是一款强大的触屏轮播库，适用于移动端和桌面端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装插件

npm install swiper vue-awesome-swiper --save

2.全局注册

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

3.本地注册

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}

GitHub链接:GitHub =>Swiper
Swiper中文网:Swiper中文网