Angular swiper 幻灯片不会卡住 [英] Angular swiper slides don't snap

问题描述

我正在尝试将 Swiper Angular 库 实施到我的 Angular 10/Ionic 5 项目中.我遇到的问题是幻灯片没有对齐，而且似乎只有一个我可以拖动的大页面.

I am trying to implement the Swiper Angular library into my Angular 10/Ionic 5 project. The problem I'm having is that the slides don't snap and it seems like it's just one big page I can drag through.

这是我尝试过的入门示例，我相信它显示的页面是正确的，但是滑动部分似乎有点偏离，没有捕捉，如果放开它也不会继续滑动，如图所示此处.

This is the Getting Started example I have tried, it shows the pages right, I believe, but the swiping part seems a bit off, with no snapping and it doesn't keep sliding if you let go, like shown here.

<swiper class ="slide-pic-preview" [slidesPerView]="3" [spaceBetween]="50"
        (swiper)="onSwiper($event)" (slideChange)="onSlideChange()"
        [navigation]="true" [pagination]="{ clickable: true }">

  <ng-template swiperSlide>Slide 1</ng-template>
  <ng-template swiperSlide>Slide 2</ng-template>
  <ng-template swiperSlide>Slide 3</ng-template>
  <ng-template swiperSlide>Slide 4</ng-template>
  <ng-template swiperSlide>Slide 5</ng-template>
  <ng-template swiperSlide>Slide 6</ng-template>
</swiper>

我还在构造函数中安装了导航部分所需的所有组件:

I have also installed all the components needed for the navigating part in the constructor:

constructor() {
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]); }

导航按钮除了触发 onSlideChange 事件之外什么也不做，正常的滑动也是如此，但不是每个页面而是每 20 像素我将它拖动到事件周围.

The naviagtion buttons also don't do anything than triggering the onSlideChange Event, so does normal swiping, but not with each page instead its like every 20px I drag it around the event gets fired.

并且样式是在modules scss文件中导入的.

And the style is imported in the modules scss file.

更新:我刚刚发现调整浏览器窗口大小解决了这个问题，现在我只需要找出如何让它工作

Update: I just found out that resizing the browser window fixes this problem, now I just need to find out how to intially make it work

推荐答案

这是@R4yYs 的答案，但进行了修改以停止 swiper 索引重置.否则，如果您转到另一个页面/选项卡，这会导致 Ionic/angular 中的幻灯片索引重置为 0.

This is @R4yYs answer but with a modification to stop the swiper index resetting. Otherwise this causes a reset of the slide index in Ionic/ angular back to 0 if you go to another page/tab.

 @ViewChild('swiper') swiper: Swiper;
  hasRunContentCheck = false;

  ngAfterContentChecked(): void {
    if (this.swiper && !this.hasRunContentCheck) {
      this.hasRunContentCheck = true;
      this.swiper.updateSwiper({});
    }
  }

这篇关于Angular swiper 幻灯片不会卡住的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！