Question

我正在使用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>

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

Answer 1

使用Next.JS，React时遇到了这个问题。我花了将近一天的时间才找出问题所在。直到我发现应该使用SwiperCore导入库。 documentation挺直的。

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

因此，基本上，这里没有花哨的地方，只是库将其代码拼接成较小的部分，因此您真正需要的东西将包含在捆绑中。（现在摇树已经是一件事情了。）

因此，我将其添加到了_app.tsx中，并且本机功能将通过导航包含在所有swiper中。

Answer 2

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

This question帮助我理解了问题，直到重新调整窗口大小为止。

添加：

observer: true, 
observeParents: true

到Swiper配置为我解决了问题

Answer 3

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

import Swiper, { Navigation } from 'swiper';

Swiper.use([Navigation]);

const swiper = new Swiper(...);

Answer 4

如documentation

中所述

默认情况下 Swiper仅导出核心版本，而没有其他模块 （如导航，分页等）。因此，您需要导入并还要配置它们：

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

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

javascript swiper导航无法正常工作

4 个答案: