【vue3中使用swiper组件】超详细保姆级教程
效果展示
简介版本
安装Swiper
项目终端中
npm i swiper
即可
这里我个人用的是npm i swiper -S
用法
swiper/vue导出 2 个组件:
Swiper
和SwiperSlide
import {Swiper, SwiperSlide} from 'swiper/vue';
//swiper所需组件
完整代码展示
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=