vue中引入swiper

最新推荐文章于 2025-05-31 20:13:02 发布

吴小花的博客

最新推荐文章于 2025-05-31 20:13:02 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js 项目实战经验文章标签： swiper

本文链接：https://blog.youkuaiyun.com/weixin_39089928/article/details/88871388

Vue.js 项目实战经验专栏收录该内容

52 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文档详细介绍了如何在Vue项目中引入并使用Swiper滑动插件，包括从下载swiper到在main.js配置，再到具体vue组件的使用步骤，最后展示实现的滑动效果。

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

1.下载swiper：

npm install vue-awesome-swiper --save

2.main.js文件引入vueAwesomSwiper

import 'swiper/dist/css/swiper.css'
//（如果使用的是2.6.0以上的版本需要自己手动去加载css）
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3.vue文件中使用

<template>
  <div class="scroll">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <swiper-slide>I'm Slide 4</swiper-slide>
      <!-- Optional controls -->
      <div