如何解决在 Svelte 中使用 Glider 没有开发依赖
我正在尝试将 Glider.js 与 svelte 组件一起使用。不幸的是，正如文档中指出的那样，我不允许更改 body 或 head 标记以导入其依赖项。
我尝试做的是将 glider.min.css 和 glider.min.js 导入到组件中。 CSS 文件已正确导入，但不知道如何触发 Glider 的新实例。
我尝试过并且看起来最合理的是：
<script>
import Glider from './glider.min.js'
onMount(() => {
new Glider(('.glider'),{
slidesToShow: 1,dots: '#dots',draggable: true,arrows: {
prev: '.glider-prev',next: '.glider-next'
}
});
})
</script>
<div class="glider-contain" style='max-width: 800px'>
<div class="glider">
<div class="glider-track"> <!-- this div would need to be added manually by the integrator -->
<div style='background-color: #1a70ae; width: 500px; height: 100px'>your content here</div>
<div style='background-color: rebeccapurple; width: 500px; height: 100px'>your content here</div>
<div style='background-color: #02be8a; width: 500px; height: 100px'>your content here</div>
<div style='background-color: #ae8e1a; width: 500px; height: 100px'>your content here</div>
</div>
</div>
<button role="button" aria-label="PrevIoUs" class="glider-prev">«</button>
<button role="button" aria-label="Next" class="glider-next">»</button>
<div role="tablist" class="dots"></div>
</div>
有谁知道在这种情况下如何让 Glider.js 工作？我不知道如何正确调用 Glider 实例。
解决方法
您可以在 <head> 中包含 JS 和 CSS 文件。
<svelte:head>
<link rel="stylesheet" href="/glider.min.css"><!-- path to you CSS file -->
<script src="/glider.min.js" /><!-- path to you JS file -->
</svelte:head>
然后在您的 <script> 中，您需要使用 .slider 类定位元素以正确实例化滑翔机滑块。
<script>
import { onMount } from 'svelte';
onMount(() => {
new Glider(document.querySelector('.glider'),{
slidesToShow: 1,dots: '#dots',draggable: true,arrows: {
prev: '.glider-prev',next: '.glider-next'
}
});
})
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
