我试图使用滑翔机.js与Svelte组件。不幸的是，我不允许更改body或head标签来导入它的依赖项，正如docs中指出的那样。
我试图做的是导入滑翔机.min.css和滑翔机.min.js到组件。CSS文件导入正确，但不知道如何触发一个新的滑翔机实例。
我试过的，看起来最合理的是:
<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>
有没有人知道如何使滑翔机.js工作在这种情况下?我不知道如何正确调用滑翔机实例。
您可以在<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>