请参阅本文档Swiper Angular
在HTML上-您的.组件. html

<swiper [slidesPerView]="3" [spaceBetween]="50" (swiper)="onSwiper($event)" (slideChange)="onSlideChange()" #newSwiper>
  <ng-template swiperSlide>Slide 1</ng-template>
  <ng-template swiperSlide>Slide 2</ng-template>
  <ng-template swiperSlide>Slide 3</ng-template>
</swiper>

创建对您的滑动器的引用&您必须在AfterViewInit - your.component.ts上示例化滑动器

@ViewChild('newSwiper') newSwiper: any;

  constructor() {
  }
  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    console.log(this.newSwiper.swiperRef);
    //Swiper instance will be displayed in console
  }

现在你可以访问slideTo（）、slideNext（）、slidePrev（）等属性和方法。

this.newSwiper.swiperRef.slideTo(2, 400);

希望这会有帮助。

在我的例子中，添加

.swiper-wrapper{
    display:inline-flex;
}

按预期工作。

确保包含Swiper CSS样式，并在@Component中使用封装

@Component({
  selector: 'app-sing-accesorios',
  templateUrl: './sing-accesorios.component.html',
  styleUrls: ['./sing-accesorios.component.css'],
  encapsulation: ViewEncapsulation.None
})

对于任何人有这个问题在未来-而不是使用setTimeout只是移动Swiper初始化从OnInit到AfterViewInit，那么它的工作就像一个魅力。也没有必要使用任何第三方库，因为Swiper已经原生支持Angular 2+。
此外，请确保您包括Swiper CSS样式（如果您喜欢，至少核心样式或整个捆绑）。

setTimeout(function () {
  const swiper = new Swiper('.swiper-container', {
    autoplay: {
      reverseDirection: true,
    },
  });
  const mySwiper = new Swiper(".swiper-container", {
    autoplay: true,
  });
  const swiper1 = new Swiper('.swiper-container2', {
    autoplay: {
      reverseDirection: true,
    },
  });
}, 4000);

对我很有效

这只是对Angular ^15.1.0、扫掠^9.1.0和网络包^5.75.0的更新。
新Swiper 9.0参考
主入口点是app.component.html

<div class="toolbar" role="banner">
  <!-- Navigation -->
</div>

<div class="content" role="main">
  <swiper-slide></swiper-slide>

  <!-- Footer -->
  <footer>

  </footer>

</div>
<router-outlet></router-outlet>

和应用程序模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// import Swiper bundle with all modules installed
import { register } from 'swiper/element/bundle';

// import styles bundle
import 'swiper/css/bundle';
import { SwiperSlideComponent } from './swiper-slide/swiper-slide.component';

// init Swiper:
register();

@NgModule({
  declarations: [
    AppComponent,
    SwiperSlideComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我使用swiper-slide.component.html创建了一个单独的swiper-slideAngular 组件

<div class="swiper newSwiper">
  <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 class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
  </div>
</div>

swiper-slide.component.ts -我在使用Webpack发送文件时遇到了一个问题，我使用this default trick来运行它。
对于较旧的Webpack版本或甚至没有版本，您可能（未测试）需要像这样调整@Component。

@Component({
  selector: 'swiper-slide',
  templateUrl: './swiper-slide.component.html'),
})

如果你使用我最初提到的依赖项，请忽略上面的内容。

import { Component, ViewChild } from '@angular/core';
import Swiper from 'swiper';

@Component({
  selector: 'swiper-slide',
  template: require('./swiper-slide.component.html').default,
})
export class SwiperSlideComponent {

  @ViewChild('.newSwiper') newSwiper: any;

  constructor() {
  }
  ngOnInit(): void {

    this.newSwiper = new Swiper(".newSwiper", {
      grabCursor: true,
      effect: "creative",
      creativeEffect: {
        prev: {
          shadow: true,
          translate: [ 0, 0, -400 ],
        },
        next: {
          translate: [ "100%", 0, 0 ],
        },
      },
    });
  }

  ngAfterViewInit(): void {
  }
}

和我的全局样式。sass（对于css添加{}和;因此）：

// Swiper styles for effective slide components
.swiper
  margin: 100px auto
  width: 100%
  height: 500px

.swiper-slide
  display: flex
  align-items: center
  justify-content: center
  font-size: 22px
  font-weight: bold
  color: #fff

.swiper-slide:nth-child(1n)
    background-color: rgb(206, 17, 17)

.swiper-slide:nth-child(2n)
  background-color: rgb(0, 140, 255)

.swiper-slide:nth-child(3n)
  background-color: rgb(10, 184, 111)

.swiper-slide:nth-child(4n)
  background-color: rgb(211, 122, 7)

.swiper-slide:nth-child(5n)
  background-color: rgb(118, 163, 12)

.swiper-slide:nth-child(6n)
  background-color: rgb(180, 10, 47)

.swiper-slide:nth-child(7n)
  background-color: rgb(35, 99, 19)

.swiper-slide:nth-child(8n)
  background-color: rgb(0, 68, 255)

.swiper-slide:nth-child(9n)
  background-color: rgb(218, 12, 218)

.swiper-slide:nth-child(10n)
  background-color: rgb(54, 94, 77)

运行应用程序并欣赏幻灯片演示😎