TypeError：无法读取未定义的属性'$ nextEl'

Question

我正在使用swiper.js http://idangero.us/swiper/构建一个Slider。

我得到以下错误：

  

TypeError：无法读取未定义的属性'$ nextEl'

是什么原因引起的，谁能指出我的方向？我发现错误导致此行：

swiper.esm.js：5700

 updateNavigation() {
    const swiper = this;

    if (swiper.params.loop) return;
    const { $nextEl, $prevEl } = swiper.navigation; // This line

    if ($prevEl && $prevEl.length > 0) {
      if (swiper.isBeginning) {
        swiper.a11y.disableEl($prevEl);
      } else {
        swiper.a11y.enableEl($prevEl);
      }
    }
    if ($nextEl && $nextEl.length > 0) {
      if (swiper.isEnd) {
        swiper.a11y.disableEl($nextEl);
      } else {
        swiper.a11y.enableEl($nextEl);
      }
    }
  },

HTML：

     <div class="container-fluid swiper-scroll">
        <div class="row d-flex no-gutters justify-content-center swiper-content-box">
            <div class="col-12 hidden-xl-up">
                <div class="swiper-container images-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <figure class="lightbox" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                                <a href="/templates/assets/images/project-detail/projekt-detail-1.jpg" class="no-link-border" data-size="1335x751">
                                    <img src="/templates/assets/images/project-detail/projekt-detail-1.jpg" />
                                </a>
                            </figure>
                        </div>
                        <div class="swiper-slide">
                            <figure class="lightbox" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                                <a href="/templates/assets/images/project-detail/projekt-detail-3.jpg" class="no-link-border" data-size="1335x751">
                                    <img src="/templates/assets/images/project-detail/projekt-detail-3.jpg" />
                                </a>
                            </figure>
                        </div>
                        <div class="swiper-slide">
                            <figure class="lightbox" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                                <a href="/templates/assets/images/project-detail/projekt-detail-1.jpg" class="no-link-border" data-size="1335x751">
                                    <img src="/templates/assets/images/project-detail/projekt-detail-1.jpg" />
                                </a>
                            </figure>
                        </div>
                        <div class="swiper-slide">
                            <figure class="lightbox" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                                <a href="/templates/assets/images/project-detail/projekt-detail-3.jpg" class="no-link-border" data-size="1335x751">
                                    <img src="/templates/assets/images/project-detail/projekt-detail-3.jpg" />
                                </a>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

JS：

import { Swiper, A11y } from 'swiper/dist/js/swiper.esm.js';


var swiper = new Swiper('.swiper-container', {
    slidesPerColumn: 1,
    spaceBetween: 10
  });

任何帮助，不胜感激！