vue3 使用swiper.js轮播图

安装
swiper官网

npm i swiper

最简单的swiper

<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/css';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
      };
    },
  };
</script>

使用自动自动切换等其他功能需要引入对应模块和css
这是一个引入自动切换功能的简单swiper。

<template>
    <swiper
        :slides-per-view="slideView"
        :loop="true"
        // 使用对应模块
        :modules="modules"
        :autoplay=" {delay: 800}"
        direction="vertical"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
    >
      <swiper-slide  v-for="(item,index) in list" :key="index">
        <div class="slide">
          <div class="item">{{item.type}}</div>
          <div class="item">{{item.varieties}}</div>
          <div class="item">{{item.value}}</div>
        </div>
      </swiper-slide>
    </swiper>
</template>

<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide} from 'swiper/vue';
// 引入自动切换模块
import { Autoplay } from 'swiper';

import 'swiper/css';
// 引入自动切换css
import 'swiper/css/autoplay';


import {ref} from "vue";
export default {
  name: "SwiperCompont",
  components: {
    Swiper,
    SwiperSlide,
  },
  props:{
    list: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  setup() {

    // 展示行数
    let slideView=ref(4);
    const onSwiper = () => {
      // console.log(swiper);
    };
    const onSlideChange = () => {
      // console.log('slide change');
    };
    return {
      onSwiper,
      onSlideChange,
      slideView,
      modules: [Autoplay],
    };
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.slide {
  height: 5rem!important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.item {
  text-align: center;
  width: 33%!important;
}
</style>