Как исправить эту ошибку на Glide.js? Ширина активного слайда всегда меньше остальных - PullRequest
Новая
       43

Как исправить эту ошибку на Glide.js? Ширина активного слайда всегда меньше остальных

0 голосов
/ 14 марта 2019

Я использую Glide.js для карусели, но активный элемент всегда имеет ширину, меньшую ширины других, и это устанавливается glide.js.

И эта высота меньше,делает его непоследовательным и уродливым, как вы можете видеть в этом видео: https://vimeo.com/323290507

Я уже пытался добавить слушатель события 'DOMContentLoaded', чтобы получить узел активного элемента и узел клонов (который содержитправильная высота) и измените ширину активного слайда на ту же ширину, что и у другого, это сработало только в первый раз, потому что скольжение всегда меняет ширину каждый раз, когда вы меняете текущий слайд.

Я также пыталсяиспользуя 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>
...