I'm using Glide.js for a carousel, but the active item always has the width smaller than that of the others, and this is set by glide.js.
And that height being smaller, makes it inconsistent and ugly, as you can see in this video: https://vimeo.com/323290507
I already tried to add a 'DOMContentLoaded' event listener to get the node of the active item and node of the clones (which contains the correct height) and change the width of the active slide to the same width as the other, this worked only the first time, because glide always changes the width every time you change the current slide.
I also tried using MutationObserver but I'm not really sure how it works and I did not get it.
Here is my code:
<div class="glide">
<div data-glide-el="track" class="glide__track">
<ul class="glide__slides">
{% for article in articles %}
{% with article.specific as article %}
<li class="glide__slide">
{% image article.main_image fill-1300x500 as img %}
<img src="{{img.url}}" width="100%">
</li>
{% endwith %}
{% endfor %}
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<i class="myglide__arrow myglide__arrow--left fas fa-angle-left" data-glide-dir="<"></i>
<i class="myglide__arrow myglide__arrow--right fas fa-angle-right" data-glide-dir=">"></i>
</div>
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
<button class="glide__bullet" data-glide-dir="=2"></button>
</div>
</div>
<script>
const glide = new Glide('.glide', {
type: 'carousel',
startAt: 0,
perView: 1,
autoplay: 3000,
hoverpause: true,
keyboard: true,
duration: 1000,
arrows: true,
animationTimingFunc: 'ease-in-out',
});
glide.mount();
</script>