title: SwiperJS auto slidesPerView does not work with angular 5
body: <p>I use <code>Swiper</code> with <code>angular 5</code> , but if I set <code>slidesPerView: 'auto'</code>, the slides not work(cannot see all sliders), event i have set the <code>loopedSlides</code>. After checking the css code generated, i found that the swiper-wrapper is with the wrong <code>translate3d(1024px, 0px, 0px)</code>, and i cannot see the sliders.
  <strong>But if i resize the window, the sliders show!</strong>
  May I know why this happen?
  Pls help to resolve this poblem, thanks a lot!</p>
  
  <p>sources codes:</p>
  
  <blockquote>
    <p>App.component.ts</p>
  </blockquote>
  
  <pre><code>import { Component, AfterViewInit } from '@angular/core';
  import Swiper from 'swiper';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements AfterViewInit {
    silderVm: Swiper;
    ngAfterViewInit(){
      this.silderVm = new Swiper('.swiper-container', {
        loop: true,
        loopedSlides: 2,
        centeredSlides: true,
        spaceBetween: 60,
        slidesPerView: 'auto'
      })
    }
  }
  </code></pre>
  
  <blockquote>
    <p>app.component.html</p>
  </blockquote>
  
  <pre><code>&lt;div class="swiper-container"&gt;
    &lt;div class="swiper-wrapper"&gt;
      &lt;div class="swiper-slide"&gt;Slide 1&lt;/div&gt;
      &lt;div class="swiper-slide"&gt;Slide 2&lt;/div&gt;
      &lt;div class="swiper-slide"&gt;Slide 3&lt;/div&gt;
      &lt;div class="swiper-slide"&gt;Slide 4&lt;/div&gt;
      &lt;div class="swiper-slide"&gt;Slide 5&lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Add Pagination --&gt;
    &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>app.component.css</p>
  </blockquote>
  
  <pre><code>html, body {
    position: relative;
    height: 100%;
  }
  body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
  }
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    width: 80%;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/0UVDY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0UVDY.png" alt="enter image description here"></a></p>