问SwiperJS库不能正常工作:未定义Swiper
EN

Stack Overflow用户

提问于 2021-09-02 10:10:21

回答 1查看 1.3K关注 0票数 0

所以我尝试使用SwiperJS库，但是它不起作用。这是一个相当大的网站，在我试图使用它的页面上有很多内容。奇怪的是，在我自己的一个小测试网站上，它确实能工作。但是当我尝试在更大的网站上使用它时，控制台会抛出一个错误。

我的代码：

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="https://swiperjs.com/demos/images/nature-6.jpg" />
    </div>
  </div>
  <div class="swiper-pagination"></div>
</div>

联合来文：

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js" id="script-swiper"></script>

<!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        pagination: {
        el: ".swiper-pagination",
        },
        observer: true,
        observeParents: true
    });
</script>

控制台错误：Swiper is not defined at www.url.com/script.js

我已经尝试过window.onload，并在运行新的Swiper之前将超时设置为几秒钟。有人知道怎么解决这个问题吗？

javascript

swiper.js

回答 1

Stack Overflow用户

发布于 2022-09-06 10:23:35

您还需要在标题中添加CSS标记：

<head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/></head>

附注：我知道这是一年后的事，但希望这能帮助那些遇到这个问题的人。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69028247

复制

相似问题

问SwiperJS库不能正常工作:未定义Swiper
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SwiperJS库不能正常工作:未定义SwiperEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SwiperJS库不能正常工作:未定义Swiper
EN