vue3 使用swiper6

 

完整的代码, 可以复制引用

安装 npm i swiper

<template>
  <!-- Swiper组件 -->
  <swiper :autoplay="swiper_options.autoplay"
          :loop="swiper_options.loop"
          :speed="swiper_options.speed"
          :pagination="swiper_options.pagination">
    <!-- Swiper的子组件，用于放置每一个滑块 -->
    <swiper-slide>
      <img src="@/assets/img/ce0752e83e81a006.jpg" alt="">
    </swiper-slide>
    <swiper-slide>
      <img src="@/assets/img/9c7efaa9adbea26f.jpg" alt="">
    </swiper-slide>
  </swiper>
</template>

<script>
// 引入需要的模块和组件
import {reactive} from 'vue';  // 从vue3中引入reactive

// 引入swiper的核心模块和需要的插件
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue'; // 引入vue版本的Swiper组件和SwiperSlide子组件
import 'swiper/swiper.scss';  // 引入swiper的主要样式
import 'swiper/components/pagination/pagination.scss';  // 引入swiper的pagination插件样式
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]); // 在SwiperCore中启用这些插件

export default {
    name:'Home',  // 定义组件的名称为'Home'
    components:{  // 在该组件中使用的子组件
        Swiper,     // 使用Swiper组件
        SwiperSlide, // 使用SwiperSlide组件
    },
    setup() {  // 使用Vue3的Composition API
        // 定义一个reactive变量swiper_options来存储swiper的配置项
        let swiper_options = reactive({
            autoplay:{  // 自动播放配置
                delay:3000,  // 每隔3000ms切换一次
                disableOnInteraction: false  // 用户操作swiper之后，autoplay不会被禁用
            },
            loop:true,  // 开启循环模式
            speed:500,  // 切换速度为500ms
            pagination:{  // 分页器配置
                clickable: true  // 分页器是可点击的
            }
        })
        return {swiper_options};  // 将swiper_options返回，使其在模板中可用
    }
}
</script>