javascript - Use Glider in Svelte with no dev dependency

Question

Welcome To Ask or Share your Answers For Others

javascript - Use Glider in Svelte with no dev dependency

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Use Glider in Svelte with no dev dependency

I'm trying to use Glider.js with Svelte component. Unfortunately I'm not allowed to change body or head tag to import it's dependencies as it is pointed out in docs.

What I've tried to do was importing the glider.min.css and glider.min.js to the component. CSS file is imported correctyl but have no idea how to trigger a new instance of the Glider.

What I've tried and what looked the most reasonably was:

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

Anyone has any idea how to make Glider.js work in that case? I don't know how to invoke Glider instance correctly.

question from:https://stackoverflow.com/questions/65902555/use-glider-in-svelte-with-no-dev-dependency

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T19:15:11+0000

You can include the JS and CSS files in the <head>.

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

Then in your <script> you'll need to target the element with .slider class to properly instantiate the glider 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>

Categories

javascript - Use Glider in Svelte with no dev dependency

javascript - Use Glider in Svelte with no dev dependency

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags