记录一次坑~

前言

swiper已经是到8了，但是目前还是在发展更新中，建议vue3的朋友们还是先用swiper7
安装的时候记得要加版本号npm install swiper@7.4.1
因为现在直接npm install swiper下载下来的是8.0.7的版本了
以下可以查看swiper的以往版本的对比数据，附上官网链接swiper各版本对比

想看各版本稳定版的也满足你们~

不能自动轮播

按照官网给的例子，然后加上 :autoplay="{ delay: 2500, disableOnInteraction: false }"。

<template>
  <swiper :slides-per-view="1" :autoplay="{ delay: 2500, disableOnInteraction: false }" :loop="true" :space-between="50">
    <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-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
  </swiper>
</template>
<script lang="ts">
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'

// Import Swiper styles
import 'swiper/css'
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  setup() {
    return {
    }
  }
}
</script>

原以为能见到自动轮播，但是事实上毫无反应
还需要引入autoPlay这个模块！！！
swiper现在都模块化成这样了吗？？？

附上完整代码

<template>
  <swiper :slides-per-view="1" :autoplay="{ delay: 2500, disableOnInteraction: false }" :loop="true" :space-between="50" :modules="modules">
    <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-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
  </swiper>
</template>
<script lang="ts">
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper'

// Import Swiper styles
import 'swiper/css'
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  setup() {
    return {
      modules: [Autoplay]
    }
  }
}
</script>

以后使用swiper7可得好好查看一下以下的模块了，分页、导航、滚动条、自动轮播、网格、淡入淡出等等

最后凡事还是得看官网swiper

完结啦！！！