提问人：kernel 提问时间：11/7/2023 更新时间：11/7/2023 访问量：61
如何在浏览器中使用 cdn 构建的 Swiper 模块
How to use Swiper modules from cdn build in browser
问：
我刚刚注意到使用 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 和分页模块时，分页根本不起作用
答：
1赞
Reyno
11/7/2023
#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>评论
0赞
kernel
11/8/2023
非常感谢。我有没有机会将 async & defer 属性用于此脚本类型？或者我需要手动做，比如等待 domcontentloaded，然后我动态创建标记？
0赞
Reyno
11/8/2023
@kernel 不需要这些属性，模块默认为“defer”。如文档中所述：“加载模块脚本时无需使用 defer 属性（请参阅 <script> 属性）;模块会自动延迟。
0赞
kernel
11/9/2023
效果很好@Reyno
评论