如何在浏览器中使用 CDN 构建的 Swiper 模块

Question

我刚刚注意到使用 swiper-bundle (https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.js) cdn 加载了很多我没有的功能然后使用我发现有 swiper.min.js (https://cdn.jsdelivr.net/npm/[email protected]/swiper.min.js)，它更轻量级，但分页不起作用即使包含分页模块（https://cdn.jsdelivr.net/npm/[email protected]/modules/pagination.min.mjs） 文档本身没有提供必要的信息（https://swiperjs.com/migration-guide-v10#modules-imports） 有谁知道如何从浏览器使用这些模块？

这是我尝试过的：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/modules/pagination.min.mjs"></script>
<script>
 const swiper = new Swiper('container', {
  modules : [Pagination],
  pagination: { //pagination(dots)
     el: '.swiper-pagination',
     clickable: true
  },
  ...
 }
</script>

当我使用 swiper-bundle 时，相同的代码可以按预期工作，但是当我使用 swiper min 和分页模块时，分页根本不起作用

Answer 1

如果你想单独使用 Swiper 模块，你必须使用 Javascript 模块。您可以通过添加

type="module"

将脚本定义为模块。

这是一个使用分页的小例子：

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<script type="module">
  import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs';
  import Pagination from 'https://cdn.jsdelivr.net/npm/swiper@11/modules/pagination.min.mjs';

   const swiper = new Swiper('.container', {
    modules: [ Pagination ],
    pagination: {
       el: '.swiper-pagination',
       clickable: true
    },
   });
</script>

<div class="container">
  <ul class="swiper-wrapper">
    <li class="swiper-slide">
      <img src="//picsum.photos/720/360?c=1" width="720" height="360" />
    </li>
    <li class="swiper-slide">
      <img src="//picsum.photos/720/360?c=2" width="720" height="360" />
    </li>
    <li class="swiper-slide">
      <img src="//picsum.photos/720/360?c=3" width="720" height="360" />
    </li>
  </ul>
  
  <div class="swiper-pagination"></div>
</div>