SwiperJS auto slipsPerView 不适用于 Angular 5

Question

我使用Swiperwith angular 5，但如果我设置slidesPerView: 'auto'，幻灯片将无法工作（看不到所有滑块），即使我设置了loopedSlides. 检查生成的CSS代码后，我发现swiper-wrapper是错误的translate3d(1024px, 0px, 0px)，并且我看不到滑块。 但如果我调整窗口大小，滑块就会显示！ 我可以知道为什么会发生这种情况吗？请帮忙解决这个问题，非常感谢！

源代码：

应用程序组件.ts

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'
    })
  }
}

应用程序组件.html

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
</div>

应用程序组件.css

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;
}

Answer 1

我有同样的问题，经过几天的研究，因为我知道幻灯片元素宽度并且它是恒定的，所以我添加了断点：

breakpoints: {
  1500: {
    slidesPerView: 3,
    spaceBetween: 15,
  },
  1000: {
    slidesPerView: 2,
    spaceBetween: 15,
  },
  500: {
    slidesPerView: 1,
    spaceBetween: 0,
  }
}

我希望这个解决方法能够帮助您！