Vue中Swiper.js导航按钮与分页功能失效问题排查

问题出在Swiper的模块缺失：Swiper 7及以后版本采用模块化设计，导航（Navigation）、分页（Pagination）这类功能需要单独导入对应的模块才能生效。你当前的modules数组只引入了SwiperEffectCreative，缺少导航和分页模块，导致配置的参数无法触发对应功能。

需要做以下操作：

1. 导入缺失的模块
   在组件的<script>部分，补充导入Navigation、Pagination以及你用到的Autoplay模块：

import { Swiper, SwiperSlide } from 'swiper/vue';
// 补充导入需要的模块
import { Navigation, Pagination, Autoplay, EffectCreative } from 'swiper';

2. 更新modules绑定数组
   把新增的模块加入到Swiper组件的:modules参数中：

<Swiper 
  class="rounded-xl text-xs w-[95%]"    
  :modules="[EffectCreative, Navigation, Pagination, Autoplay]"    
  :slides-per-view="2"      
  :space-between="20"
  :navigation="true"
  :pagination="{clickable:true, dynamicBullets:true}"
  :autoplay="{delay: 3000,disableOnInteraction: true,}" >
  <!-- ... 轮播内容 ... -->
</Swiper>

3. 导入对应样式（关键）
   如果还没引入Swiper的样式，需要补充导入基础样式和各模块的样式，否则导航按钮、分页可能会因为没有样式而隐藏，看起来像是功能未生效：

// 基础样式
import 'swiper/css';
// 导航模块样式
import 'swiper/css/navigation';
// 分页模块样式
import 'swiper/css/pagination';
// 创意切换效果样式
import 'swiper/css/effect-creative';
// 自动播放模块样式（可选，若autoplay正常可忽略）
import 'swiper/css/autoplay';

完成以上步骤后，导航按钮和分页功能应该就能正常显示并工作了。

内容的提问来源于stack exchange，提问作者coder