在 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>

carousel javascript svelte