如何在vue3中使用swiper插件(教程)

news2024/12/29 9:05:26

我的项目环境Vue3+vite+ts+scss,

首先当然是下载依赖:

   pnpm install swiper@10.0.4

一定要下载正确的版本, 每个版本的使用差异还是有一些的

2.使用以下代码进行测试

<template>
<div>
<swiper :modules="modules" :navigation="true" :loop="true" :pagination="{ clickable: true }">
  <!-- modules为导入的模块，绑定导入的模块导航模块和分页模块，loop实现轮播图循环模式 -->
  <swiper-slide>
    <img src="/imgs/testSwiper/img1.jpg">
  </swiper-slide>
  <swiper-slide>
    <img src="/imgs/testSwiper/img2.jpg">

  </swiper-slide>
  <swiper-slide>
    <img src="/imgs/testSwiper/img3.jpg">
  </swiper-slide>

</swiper>

</div>
</template>

<script>
// 这里需要引入组件
import { Swiper, SwiperSlide } from 'swiper/vue';
// 这里需要引入模块 
//pagination 就是指示器, 在效果中为小圆点...
// 他有很多的模块, 具体看官方文档
import { Pagination,Navigation } from 'swiper/modules';
// 这里需要引入样式, 
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css';
export default {
  name: 'HelloWorld',
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      modules: [Navigation, Pagination]
    }
  }
}
</script>