请问老师,怎么在vue中使用swiper

问题描述：

__Promise 2021-10-21

源自：vue基础入门（下） 3-12 【总结】vue相关问题

收起

1回答

好帮手慕然然回答被采纳获得+3积分 2021-10-21 15:26:30

同学你好，在vue中使用swiper插件，可以参考以下官方文档：https://www.swiper.com.cn/usage/index.html

以在vue中使用Swiper7为例，使用步骤如下：

1、在vue项目中，安装swiper插件

 npm i swiper

2、在页面中引入swiper相关组件及swiper/css样式，并使用

<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>
  // 引入swiper模块
  import { Swiper, SwiperSlide } from 'swiper/vue';
  //引入swiper样式，可以在入口文件中引入
  import 'swiper/css';
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
     // 代码实现
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
      };
    },
  };
</script>

更多swiper插件的使用教程，建议同学查看官方文档即可。

祝学习愉快！

收起回答

__Promise 提问者 #1

老师,我就是按官方文档来然后报错了,不知道咋回事

2021-10-21 15:29:40

好帮手慕然然回复提问者 __Promise #2

同学你好，应该是使用Swiper7版本，还需要额外安装其它模块，比较麻烦，建议同学使用6.x版本的swiper，

步骤如下

1、安装swiper：npm install swiper@6 --save-dev

2、代码使用示例

<template>
  <div>
    <swiper
      :autoplay="swiper_options.autoplay"
      :loop="swiper_options.loop"
      :speed="swiper_options.speed"
      :pagination="swiper_options.pagination"
      :navigation="swiper_options.navigation"
    >
      <swiper-slide>slide 1</swiper-slide>
      <swiper-slide>slide 2</swiper-slide>
      <swiper-slide>slide 3</swiper-slide>
      <swiper-slide>slide 4</swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { reactive } from "vue";
// 使用swiper的compositon API
import SwiperCore, { Autoplay, Pagination, Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.min.css";
// 文件在node_modules文件夹下的swiper文件夹下，导入的时候不需要加node_modules
import "swiper/components/pagination/pagination.min.css";
import "swiper/components/navigation/navigation.min.css";
// 这条语句是必不可少的
SwiperCore.use([Autoplay, Pagination, Navigation]);
export default {
  name: "Home",
  components: {
    Swiper,
    SwiperSlide
  },
  setup() {
    // swiper相关配置属性放在swiper_options这个变量里
    let swiper_options = reactive({
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      },
      loop: true,
      speed: 1000,
      pagination: {
        clickable: true
      },
      navigation: {
        clickable: true
      }
    });
    // 将swiper_options返回给模板中的swiper组件使用
    return { swiper_options };
  }
};
</script>
<style>
.swiper-container {
  height: 500px;
  width: 100%;
}
.swiper-wrapper {
  position: relative;
}
.swiper-slide {
  width: 100%;
  height: 100%;
  background-color: red;
  text-align: center;
  line-height: 500px;
}
</style>

祝学习愉快！

2021-10-21 16:30:09