Swiper 元素现在在内部布局中包含了一个额外的 <div class="swiper">
主元素。
v9 中
<swiper-container>
<!-- shadow -->
<div class="swiper-wrapper">
<slot />
</div>
</swiper-container>
v10 中
<swiper-container>
<!-- shadow -->
<div class="swiper">
<div class="swiper-wrapper">
<slot />
</div>
</div>
</swiper-container>
因此,如果您依赖并对 shadow DOM 内部进行了一些操作,则需要考虑新的布局。
Swiper web 组件不再向文档注入全局样式。在这种情况下,如果您使用自定义导航、分页、滚动条元素,它们将不会被样式化。
为了更好地进行 tree-shaking,现在所有模块都必须从 /swiper/modules
导入。
v9 中
import Swiper, { Navigation, Pagination } from 'swiper';
v10 中
import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';
v10 中主要的重大更改是简化的包结构。
.esm.js
脚本替换为 .mjs
。.browser.esm.js
脚本现在与 .mjs
相同。如果您直接导入文件,则需要考虑这一点。以下是新的包结构:
/modules/
/shared/
/types/
/package.json
/swiper-bundle.css
/swiper-bundle.js
/swiper-bundle.min.css
/swiper-bundle.min.js
/swiper-bundle.min.js.map
/swiper-bundle.min.mjs
/swiper-bundle.min.mjs.map
/swiper-bundle.mjs
/swiper-element-bundle.js
/swiper-element-bundle.min.js
/swiper-element-bundle.min.js.map
/swiper-element-bundle.min.mjs
/swiper-element-bundle.min.mjs.map
/swiper-element-bundle.mjs
/swiper-element.d.ts
/swiper-element.js
/swiper-element.min.js
/swiper-element.min.js.map
/swiper-element.min.mjs
/swiper-element.min.mjs.map
/swiper-element.mjs
/swiper-react.d.ts
/swiper-react.mjs
/swiper-vars.less
/swiper-vars.scss
/swiper-vue.d.ts
/swiper-vue.mjs
/swiper.css
/swiper.d.ts
/swiper.js
/swiper.less
/swiper.min.css
/swiper.min.js
/swiper.min.js.map
/swiper.min.mjs
/swiper.min.mjs.map
/swiper.mjs
/swiper.scss