Angular Thumbs Gallery

[xBelabz]

Hi, I'm trying to make the Thumbs Gallery works with Angular but i got this error: Cannot read property 'addClass' of undefined at Swiper.init

Here is my configs:

public galleryThumbs: any = {
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
  }

  public galleryTop: any = {
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    thumbs: {
      swiper: this.galleryThumbs
    }
  }

Here's my HTML:

<swiper [config]="galleryTop">
  <div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
    </div>
  </div>
</swiper>

<swiper [config]="galleryThumbs">
<div class="swiper-container gallery-thumbs">
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  </div>
</div>
</swiper>

<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>

Any advice please would be appreciated. All the best.

[sukhbains]

Hey xBelabz Did you ever get this working? I tried and failed :(

[fabiangarga]

Hi there, to get the thumbs working, you actually need to reference to the swipe object. This example should work Template:

<swiper [config]="galleryTop" #carousel>
  <div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
    </div>
  </div>
</swiper>

<swiper [config]="galleryThumbs" #carouselThumbs>
<div class="swiper-container-thumbs">
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  </div>
</div>
</swiper>

In your component

 @ViewChild( 'mainCarousel', { static: false } ) carousel: SwiperComponent
 @ViewChild( 'thumbsCarousel', { static: false } ) carouselThumbs: SwiperComponent


public galleryThumbs: any = {
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
  }

  public galleryTop: any = {
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    thumbs: {
      swiper: this.carouselThumbs.swiper
    }
  }

Hope it helps you

[LiemLT]

Hi @fabiangarga . I tried to copy your code but got this error:

Property 'carouselThumbs' is used before its initialization.ts(2729)  
app.component.ts(12, 3): 'carouselThumbs' is declared here.

This is the demo codebase: CodeSandbox Can you help fix the error ?

[frosales14]

did anyone get this option working?