Блог

У меня есть вложенный слайдер (один вертикальный, родительский и один горизонтальный, дочерний), и я хотел бы сбросить индекс дочернего элемента при изменении родительского индекса. Слайды создаются динамически на основе списка объектов.

Может быть, кто-нибудь может подсказать мне, как получить текущий горизонтальный указатель, чтобы я мог получить доступ к его индексу и изменить его?

Спасибо всем 🙂

swiper-homepage.component.html:

  <div>
  <div class="col-10 offset-1 col-md-3 offset-md-4 col-lg-3 offset-lg-4 col-xl-4 offset-xl-4 center">
    <div class="card">
  <swiper #verticalSwiper [config]="verticalConfig" (swiper)="onVerticalSwiper($event)"
    (slideChange)="onVerticalSlideChange($event)" (transitionEnd)="onVerticalTransitionEnd($event)"
    (transitionStart)="onTransictionStart($event)">

    <ng-template swiperSlide *ngFor="let company of companies">
      <div class="text-white">

        <swiper [attr.ib]="'horSwiper'   currentCompanyIndex" [config]="horizontalConfig"
          (swiper)="onHorizontalSwiper($event)" (transitionEnd)="onHorizontalTransitionEnd($event)"
          (slideChange)="onHorizontalSlideChange($event)">
          <ng-template swiperSlide>
            <detail-slide [company]="company">
            </detail-slide>
          </ng-template>
          <ng-template swiperSlide *ngFor="let multimedia of company.multiMedia">
            <img [src]="multimedia.mediaURL" class="card-img center-page-image" alt="...">
            <div class="card-img-overlay lower-third-company-name">
              <button type="button" class="btn btn-light" (click)="goToPage('detail')">{{
                company.companyName }}</button>
              <p class="card-text description-with-top-margin">{{ company.companyDescription }}</p>
            </div>
          </ng-template>
        </swiper>

      </div>
    </ng-template>

  </swiper>
  
</div>
 

swiper-homepage.components.ts:

  import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { withLatestFrom } from 'rxjs';
import { RouterControllerComponent } from 'src/app/component/router-controller/router-controller.component';
import { GestureController } from 'src/app/interfaces/gesture-controller';
import { Company } from 'src/app/object/company';
import { CompanyService } from 'src/app/service/company.service';
import SwiperCore, { Swiper, SwiperOptions } from 'swiper';
import { SwiperComponent } from 'swiper/angular';

@Component({
  selector: 'app-swiper-homepage',
  templateUrl: './swiper-homepage.component.html',
  styleUrls: ['./swiper-homepage.component.css']
})
export class SwiperHomepageComponent extends RouterControllerComponent implements OnInit{

  verticalConfig: SwiperOptions = {
    slidesPerView: 1,
    spaceBetween: 50,
    direction: 'vertical',
    preloadImages: false,
    // Enable lazy loading
    lazy: true,
    initialSlide: 0
  };

  horizontalConfig: SwiperOptions = {
    slidesPerView: 1,
    spaceBetween: 50,
    direction: 'horizontal',
    preloadImages: false,
    // Enable lazy loading
    lazy: true,
    observeParents: true,
    initialSlide: 1
  }

  private currentHorizontalSwiper = new Swiper('', {});
  

  public currentCompanyIndex = 0;
  public isReadyToDetail = false;
  public companies: Company[] = [];
  
  constructor(
    private readonly companyService: CompanyService,
    readonly router: Router
  ) {
    super(router);
   }

  ngOnInit(): void {
    this.loadPage();
  }

  //TODO manage the company arrangement, allow infinite

  loadPage(){
    this.companyService.getAllCompanies().subscribe(gettedCompanies =>{
      this.companies = gettedCompanies;
    });
  }

  onVerticalSwiper(swiper: any) {
    console.log(swiper);
  }

  onHorizontalSwiper(swiper: any) {}

  onVerticalSlideChange(swiper: any) {
    console.log(swiper);

  }

  onHorizontalSlideChange(swiper: any) {
    this.currentCompanyIndex = swiper.activeIndex;
    if(swiper.activeIndex === 0)
      this.isReadyToDetail = true;
  }

  onVerticalTransitionEnd(swiper: any){
    console.log("END");
    console.log(swiper);
  }

  onHorizontalTransitionEnd(swiper: any){
    if(swiper.activeIndex === 0)
      this.isReadyToDetail = true;
  }
  
  onTransictionStart(swiper: any){
    console.log("START");
    console.log(swiper);
  }

  onBeforeTransiction(swiper: any){
    console.log("BEFORE START");
    console.log(swiper);
  }

  //TODO capire come funzionano gli observer, per resettare i vari index
  

}
 

Поскольку у нас не будет доступа к динамически создаваемым экземплярам swiper, мы можем рассмотреть возможность создания компонента-оболочки Angular (который, в свою очередь, отображает swiper, беря реквизиты из цикла) и отображать его в вашем цикле. Когда когда-либо изменится ваш родительский слайдер, используйте предпочитаемый механизм событий Angular для оповещения всех компонентов оболочки, чтобы они сбросили себя.

Когда мы передаем реквизиты swiper компоненту-оболочке, мы можем использовать @ViewChild, чтобы получить экземпляр swiper