title: CSS selector in Swiper js breaks
body: <p>I have my swiper component:</p>
  <pre><code>&lt;swiper [config]=&quot;slideOpts&quot;&gt;
                 &lt;ng-template swiperSlide *ngFor=&quot;let unit of Units&quot; class=&quot;peeking-slide&quot;&gt;
                      &lt;fs-reserved-unit-card [router]=&quot;router&quot; [activatedRoute]=&quot;activatedRoute&quot; [doRefresh]=&quot;doRefresh&quot; [Unit]='Unit' &gt;&lt;/fs-reserved-unit-card&gt;
                 &lt;/ng-template&gt;
             &lt;/swiper&gt;
  </code></pre>
  <p>with slideOpts being:</p>
  <pre><code>slideOpts = {
          slidesPerView: 'auto',
          spaceBetween: 10
          navigation: {
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev',
          },
      };
  </code></pre>
  <p>or:</p>
  <pre><code>slideOpts = {
          slidesPerView: 'auto',
          spaceBetween: 10
          pagination: {
               el: '.swiper-pagination',
               type: 'bullets',
          },
      };
  </code></pre>
  <p>it seems that as soon as I seem to target the CSS selector it breaks, with the pagination if I have &quot;el: x&quot; the pagination bullets simply do not display. With the Navigation &quot;theprevEl: x&quot; and &quot;nextEl: x&quot; also does not display.</p>
  <p>is there anything Im missing perhaps?</p>