vue3 setup 语法中使用swiper

最新推荐文章于 2024-06-18 16:32:58 发布

岩盐芝士:)

最新推荐文章于 2024-06-18 16:32:58 发布

阅读量962

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_51924709/article/details/125919323

版权

在开发过程中 swiper 频频报错
第一步

npm i swiper

<template>
<div style="width: 500px">
  <swiper :slides-per-view="3" :space-between="50" :modules="modules" :navigation="true">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</div>
</template>
<script  setup>
import {ref} from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import "swiper/css/navigation";
import { Navigation } from "swiper";
import 'swiper/css'
const modules = ref([Navigation])
</script>