Vue3+Swiper@6使用

小杨小杨、努力变强！

已于 2022-06-27 11:25:57 修改

阅读量309

点赞数

分类专栏： web前端文章标签：大数据

于 2022-06-27 11:25:27 首次发布

本文链接：https://blog.csdn.net/qq_42717015/article/details/125480744

版权

本文将介绍如何在Vue3项目中安装并使用Swiper6，详细阐述了从安装库到实际应用的步骤，帮助开发者实现动态轮播效果。

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

1.安装

npm install swiper@6 --save

2.引入并且使用

import SwiperCore, {Autoplay,Pagination} from 'swiper';
import {Swiper,SwiperSlide} from 'swiper/vue';
import 'swiper/swiper.min.css';
import 'swiper/components/pagination/pagination.scss';
SwiperCore.use([Autoplay,Pagination]);

export default {
        components: {
            Vue3SeamlessScroll,Swiper, SwiperSlide
        },
        setup () {
            const store = useStore()
            let swiper_options = reactive({
                autoplay:{
                    delay:8000,
                    disableOnInteraction: true
                },
                loop:true,
                speed:1000,	
                pagination:{
                    clickable: true
                }
            })
            const data = reactive<Table>({
                tableData:[],
                page:1,
                t