在vue项目使用swiper@6，解决分页器pagination不显示，导航navigation点击不跳转

CV工程师、

已于 2022-09-27 16:28:16 修改

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 vue.js javascript

于 2022-09-27 16:21:08 首次发布

原文链接：https://www.cnblogs.com/LXin17/p/15726250.html

本文介绍如何在Vue项目中正确配置Swiper6组件，包括解决分页器不显示及导航点击不响应等问题。通过具体代码示例，指导开发者完成Swiper的初始化配置，并实现轮播图的基本功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址：在vue项目使用swiper@6，解决分页器pagination不显示，导航navigation点击不跳转问题 - 阿piu～ต - 博客园

默认情况下，Swiper 仅导出核心版本，没有附加模块（如导航、分页等）。所以你也需要导入和配置它们：

import引入之后，初始化swiper，仍需要加入配置。

import Swiper, { Navigation, Pagination,Autoplay } from 'swiper';

import 'swiper/swiper-bundle.css';
 

 Swiper.use([Navigation, Pagination,Autoplay]);
 


export default {
  mounted() {
    setTimeout(() => {
      let mySwiper = new Swiper(".swiper-container", {
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable:true,
        },
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    }, 2000);
  },
}

如果要使用所有模块（捆绑包）导入 Swiper，则应从swiper/bundle以下位置导入：