1

我将 Glide.js 用于轮播，但活动项目的宽度总是小于其他项目的宽度，这是由 glide.js 设置的。

正如您在此视频中看到的那样，该高度较小，使其不一致且难看：https ://vimeo.com/323290507

我已经尝试添加一个“DOMContentLoaded”事件侦听器来获取活动项目的节点和克隆节点（包含正确的高度）并将活动幻灯片的宽度更改为与另一个相同的宽度，这只有效第一次，因为每次更改当前幻灯片时 glide 总是更改宽度。

我也尝试过使用 MutationObserver 但我不确定它是如何工作的，而且我没有得到它。

这是我的代码：

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

0 回答 0