官方文档:swiper
npm i swiper@5.2.0
<template>
<div>
<div class="swiper">
<div class="swiper-wrapper">
<div v-for="(v, i) in 10" :key="i" class="swiper-slide">
第{
{v}}个
</div>
</div>
<!-- 导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</template>
<script>
import Swiper from "swiper"
import "swiper/css/swiper.css"
export default {
data () {
return {}
},
mounted () {
this.getSwiper()
},
methods: {
getSwiper () {
new Swiper(".swiper", {
slidesPerView: 4, //每组数量
spaceBetween: 5, //间隔(px)
navigation: { //导航按钮
nextEl: "