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.