vue3 中使用 swiper

最新推荐文章于 2024-05-21 09:48:42 发布

jjw_zyfx

最新推荐文章于 2024-05-21 09:48:42 发布

阅读量3.5k

点赞数

分类专栏：前端 vue swiper

本文链接：https://blog.csdn.net/jjw_zyfx/article/details/117880298

版权

前端同时被 3 个专栏收录

297 篇文章 0 订阅

订阅专栏

vue

139 篇文章 1 订阅

订阅专栏

swiper

4 篇文章 0 订阅

订阅专栏

本文档介绍了在Vue项目中遇到Swiper版本兼容问题的解决方案，包括安装特定版本的node-sass、sass-loader和swiper，并提供了Vue组件的使用示例。详细步骤包括运行指定版本的npm安装命令，以及在模板和脚本中引入Swiper组件和样式。通过这些步骤，可以成功解决Swiper在Vue项目中的兼容性问题并实现滑动效果。

摘要由CSDN通过智能技术生成

官方这个不大好用因为有版本兼容问题：

https://swiperjs.com/vue

可以参考如下方式：主要是版本兼容问题

即：

npm install node-sass@4.14.1 -S

npm install sass-loader@7.3.1 -S

npm install swiper@6.7.0 -S

然后在vue中复制官方上的文档

即：

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/swiper.scss';
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    methods: {
      onSwiper(swiper) {
        console.log(swiper);
      },
      onSlideChange() {
        console.log('slide change');
      },
    },
  };
</script>

最终的效果如下：