1.创建
npm i swiper
2.在代码中使用
<template>
<swiper
:navigation="true" :modules="modules" class="mySwiper" :pagination="true"
:autoplay="true" :effect="'cards'"
>
<swiper-slide><img src="" alt=""></swiper-slide>
<swiper-slide><img src="" alt=""></swiper-slide>
<swiper-slide><img src="" alt=""></swiper-slide>
...
</swiper>
</template>
<script>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/effect-cards'
import { Navigation, Pagination, Autoplay, EffectCards } from 'swiper'
export default {
name: 'Swiper',
components: {
Swiper,
SwiperSlide
},
setup () {
return {
modules: [Navigation, Pagination, Autoplay, EffectCards]
}
}
}
</script>
<style scoped >
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>