我想将 swiper slider 添加到 slim ,我的问题是:
<script> import from "styles.css" ... </script>
因为导入到头部很棘手(Import css in node_modules to svelte)swiper.js
文件到 slim ,它几乎可以工作。它适用于触摸(鼠标),但按钮不起作用( .swiper-button-next
.swiper-button-prev
)。是否存在特殊的导入 .js 文件规则? 代码示例:https://codesandbox.io/s/musing-leavitt-ygstx?file=/App.svelte:224-243
最佳答案
.js
一样导入 css 文件。模块:<script>
import { onMount } from "svelte";
import "swiper/swiper-bundle.min.css"; // <- just import your css
...
</script>
By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too:
// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';
// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);
// init Swiper:
const swiper = new Swiper(...);
所以最后,你的组件初始化可以这样完成:<script>
import { onMount } from "svelte";
import "swiper/swiper-bundle.min.css";
import Swiper, { Navigation } from "swiper";
Swiper.use([Navigation]);
onMount(() => {
const swiper = new Swiper(".swiper-container", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
});
</script>
这是 codesandbox 的链接.
关于svelte - 将 .js/.css 文件添加到 .svelte 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63637662/