JavaScript Swiper 本机导航功能不起作用答案

【问题标题】：JavaScript Swiper Native Navigation Function is not workingJavaScript Swiper 本机导航功能不起作用
【发布时间】：2018-04-24 19:54:37
【问题描述】：

我正在使用 swiper 在我的网站上制作滑块。不幸的是，导航在 Chrome 中不起作用。按钮出现但不执行任何操作。

这是我的代码：

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
      </div>
      <div class="swiper-slide">
      </div>
      <div class="swiper-slide">
      </div>
      <div class="swiper-slide">
      </div>
      <div class="swiper-slide">
      </div>
    </div>

    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>



  <script src="js/swiper/swiper.min.js"></script>

  <script>
    var swiper = new Swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      slidesPerView: 3,
      spaceBetween: 5,
      loop: true,
      centeredSlides: true,
    });
  </script>

我希望有人可以帮助我，因为我找不到与此主题相关的任何信息。

【问题讨论】：

你的控制台说什么？
控制台什么也没说..

标签： javascript swiper

【解决方案1】：

尝试从 Swiper 库中导入 Navigation。然后Swiper.use()

import Swiper, { Navigation } from 'swiper';

Swiper.use([Navigation]);

const swiper = new Swiper(...);

【讨论】：

如果你能解释你的答案，或者至少提供一个完整的代码示例会很好。
上面写了完整的代码示例，省略号只是为了在代码中给出位置感。
我一直在寻找这么久，这是唯一对我有用的东西。感谢分享！
就像一个魅力。谢谢！！

【解决方案2】：

我遇到了完全相同的问题，无法理解。

This question 帮助我了解在调整窗口大小之前问题一直存在。

添加：

observer: true, 
observeParents: true

到 Swiper 配置为我解决了问题

【讨论】：

【解决方案3】：

我在使用 Next.JS,React 时遇到了这个问题。我花了将近一天的时间弄清楚出了什么问题。直到我发现我应该使用SwiperCore 导入库。 documentation 有点直截了当。

import SwiperCore, { Navigation } from 'swiper';
SwiperCore.use([Navigation]);

所以基本上，这里没有花哨的东西，它只是库将它的代码拼接成更小的部分，这样你真正需要的东西就会包含在你的捆绑包中。（虽然摇树现在已经是一件事了）。

所以我将它添加到我的_app.tsx，然后使用导航将本机功能包含到所有swiper。

【讨论】：

【解决方案4】：

如documentation中所说

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

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);

【讨论】：