angular - 使用角度中的自定义按钮进行滑动分页/导航

Question

我将Swiper用于 Angular 并使用 Angular Swipper包装器。我正在尝试添加一个onclick滑动到下一张幻灯片的按钮。

但我不知道如何获取 Swiper 实例以及如何调用slidenext函数。我该怎么做？提前致谢。

Answer 1

Angular 12 / Swiper 6.8.1

.html

<swiper [slidesPerView]="4" [spaceBetween]="50">
    <ng-template swiperSlide>
      <app-product-item></app-product-item>
    </ng-template>
</swiper>
<button (click)="swipeNext()">Prev</button>
<button (click)="swipePrev()">Next</button>

.ts

@ViewChild(SwiperComponent) swiper: SwiperComponent;


swipePrev() {
  this.swiper.swiperRef.slidePrev();
}
swipeNext() {
  this.swiper.swiperRef.slideNext();
}

Answer 2

使用 ngx-wrapper 时，您可以使用组件或指令方法。如上所述，您可以使用 @ViewChid 访问 swiper 参考以访问 swiper 方法。

swiper-wrapper 示例

TS

@ViewChild(SwiperDirective) directiveRef?: SwiperDirective;
@ViewChild(SwiperComponent, { static: false }) compRef?:SwiperComponent;
swiperConfig = {
    initialSlide: 0
};

nextSlide() {
    this.directiveRef.nextSlide();
}
previousSlide() {
    this.directiveRef.prevSlide();
}
nextSlideComp() {
    this.compRef.directiveRef.nextSlide();
}
previousSlideComp() {
    this.compRef.directiveRef.prevSlide();
}

HTML

<!-- Directive usage -->

<div class="swiper-container" [swiper]="swiperConfig">
    <div class="swiper-wrapper">
    <div class="swiper-slide" *ngFor="let slide of slides">
        ....your content
    </div>
    </div>
</div>

<!-- Navigation -->
<button (click)="nextSlide()">Previous</button>
...

<!-- Component usage -->

<swiper [config]="swiperConfig">
    <div *ngFor="let slide of slides">
    ...your content
    </div>
</swiper>

<!-- Navigation -->
<button (click)="nextSlideComp()">Previous</button>
...

注意： ngx-swiper-wrapper 不再需要，因为 swiperJs 有自己的角度组件。 SwiperJS - 角度组件

您可以使用swiper事件，该事件会尽快返回 swiper 实例。

<swiper (swiper)="..." (slideChange)="..." </swiper>

Answer 3

关于自定义分页。我正在使用 Angular 12。 HTML：

<section class="products-preview">
  <div class="swiper products-preview__swiper">
    <swiper [config]="swiperConfig">
      <ng-template *ngFor="let item of slides"
                   class="swiper-slide"
                   swiperSlide>Some HTML</ng-template><!-- /swiper-slide -->
    </swiper><!-- /swiper-wrapper -->
    <div class="products-preview__pagination">
      <div class="swiper-pagination"></div><!-- /swiper-pagination -->
    </div><!-- /products-preview__pagination -->
  </div><!-- /swiper -->
</section><!-- /products-preview -->

.ts 文件：

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import SwiperCore, {Pagination, SwiperOptions} from 'swiper';
import {ProductsPreviewSliderInterface} from "../../interfaces/products-preview-slider.interface";
import {ProductsPreviewSliderService} from "../../services/products-preview-slider.service";

SwiperCore.use([
  Pagination,
]);

@Component({
  selector: 'app-test-slider',
  templateUrl: './test-slider.component.html',
  styleUrls: ['./test-slider.component.scss'],
  encapsulation: ViewEncapsulation.None // Ability to style child components
})
export class TestSliderComponent implements OnInit {

  public slides: ProductsPreviewSliderInterface[] = [];
  public swiperConfig: SwiperOptions = {};

  constructor(private productsPreviewSliderService: ProductsPreviewSliderService ) {}

  ngOnInit() {

    // getSlides() service method returns an array of objects containing information about slides
    const slidesArr = this.slides = this.productsPreviewSliderService.getSlides();

    // swiper config, which we pass to the HTML
    this.swiperConfig = {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
          // Create a pagination element
          return '<div class="' + className + '">' +
            '<div class="products-preview__inner">' +
            '<img src="'+ slidesArr[index]['pagination']['icon'] +'" alt="" class="products-preview__icon">' +
            '<div class="products-preview__name">'+ slidesArr[index]['pagination']['name'] +'</div>' +
            '<div class="products-preview__txt">'+ slidesArr[index]['pagination']['text'] +'</div>' +
            '</div>' +
            '</div>';
        },
      }
    };

  }

}

Answer 4

HTML：

<button (click)="swipeToNextSlide()">Swipe to Next Slide</button>.

零件：

public swipeToNextSlide() {
    let index;
    let ref;
    if (this.type === "directive" && this.directiveRef) {
      ref = this.directiveRef;
      index = this.directiveRef.getIndex();
    } else if (
      this.type === "component" &&
      this.componentRef &&
      this.componentRef.directiveRef
    ) {
      ref = this.componentRef.directiveRef;
      index = this.componentRef.directiveRef.getIndex();
    }
    if (index < this.slides.length - 1) {
      ref.setIndex(index + 1);
    }
}

我已经用stackblitz的解决方案分叉了你的项目。

Answer 5

答案是：

//inside component
@ViewChild(SwiperComponent) componentRefer: SwiperComponent;

//declare a variable to save index
var currentIndex = 0;

public onIndexChange(index: number) {
this.currentIndex = index;
}

swipeToNextSlideManually() {    
    if (this.currentIndex != 0) {
      let indx = this.currentIndex + 1;
      this.componentRefer.directiveRef.setIndex(indx);
    }    
  }

在html里面：

<swiper [config]="config " (indexChange)="onIndexChange($event) ">

<!--Btn click-->
<button (click)="swipeToNextSlideManually()">Next</button>