angular - SwiperJS 自动 slidesPerView 不适用于 Angular 5

Question

我将 Swiper 与 angular 5 一起使用，但是如果我设置 slidesPerView: 'auto'，幻灯片将无法工作(无法看到所有 slider ), 事件我设置了 loopedSlides。检查生成的css代码后，发现swiper-wrapper的translate3d(1024px, 0px, 0px)错误，看不到 slider 。但如果我调整窗口大小， slider 就会显示!我可以知道为什么会这样吗？请帮助解决这个问题，非常感谢!

源代码:

App.component.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'
    })
  }
}

app.component.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>

app.component.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,
  }
}

我希望这个解决方法对您有所帮助!