SwiperJS自动slidePerView不适用于角度5

Question

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

来源代码：

  

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

我希望解决方法能为您提供帮助！

Answer 2

使用ngx-swiper-wrapper帮助了我。它适用于slidesPerView：“自动”