【vue3中使用swiper组件】

最新推荐文章于 2024-05-21 09:48:42 发布

聪明的墨菲特学前端

最新推荐文章于 2024-05-21 09:48:42 发布

阅读量9.4k

点赞数 4

文章标签： vue.js 前端框架 swiper使用

本文链接：https://blog.csdn.net/weixin_52452081/article/details/131531486

版权

【vue3中使用swiper组件】超详细保姆级教程

效果展示

在这里插入图片描述

简介版本

在这里插入图片描述

安装Swiper

项目终端中npm i swiper即可
这里我个人用的是 npm i swiper -S

用法

swiper/vue导出 2 个组件：Swiper和SwiperSlide

import {Swiper, SwiperSlide} from 'swiper/vue'; //swiper所需组件

点击可以参考swiper中使用vue官方文档

完整代码展示

html静态展示

<template>
    <div class="project">
        <div class="project-swiper">
            <swiper
                    :slidesPerView="7"
                    :spaceBetween="10"
                    :loop="true"
                    :centeredSlides="false"
                    :autoplay="{delay: 2000,disableOnInteraction: false}"
                    :navigation="navigation"
                    :modules="modules"
                    class="mySwiper">
                <swiper-slide v-for="num in 14" :key="num">
                    <div class="swiper-content">
                        <div><img src="@/assets/homePage/组件%2062%20–%201.png" alt=