angular2+: unable to impose spacebetween or breakpoints in a gallery of thumbs

[qqtf]

We had a lot of issues imposing our desires to the gallery, so maybe, in the end, we ended up with very crooked code.

Basically we have a gallery a thumbs linked to that gallery.

We wanted each thumb to be equally in size and next we want there to be a default distance between each thumb. When you switch to a smaller screen, you'll have less thumbs, but they remain 100px by 100px boxes with 25px space in between.

We tried to define the thumb-swiper in the constructor or onInit or afterViewInit with breakpoints, but the swiper doesn't respond to it at all.

I think the way we link the gallery with the thumbs is wrong, but we can't get it to work in any other way. We're now triggering the link with an event, it seems. There should be a way to pass the breakpoints-data when establishing the link somehow.

https://stackoverflow.com/questions/67967158/angular2-swiperjs-unable-to-impose-spacebetween-or-breakpoints-in-a-gallery-o

Any suggestions, ideas, links, ..., are more than welcome.

code
html
`
<swiper (slideChange)="onSlideChange($event)" [navigation]="true" [slidesPerView]="1" [spaceBetween]="100" [thumbs]="{ swiper: thumbSwiper }" [centeredSlides]="true">
<ng-template swiperSlide *ngFor="let data of dataCarousel">

<img [src]="data.photoUrl" loading="lazy">

<swiper class="thumbSwiper"
(swiper)="setThumbSwiper($event)"
[navigation]="{}"
[scrollbar]="{ draggable: true }"
>
<ng-template swiperSlide *ngFor="let data of dataCarousel">

<img class="text-center imgthumb" [src]="data.thumbUrl" loading="lazy">

`

css
`
html, body {
position: relative;
}

body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}

.swiper-slide {
background-size: auto;
background-position: center;
}

.gallery-top {
height: 80%;
width: 100%;
}

.gallery-thumbs {
height: 20%;
box-sizing: border-box;
}

.gallery-thumbs .swiper-slide {
width: 25%;
height: 100px;
width: 100px;
opacity: 0.4;
}

.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}

.swiper-container {
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}

img {
text-align: center;
height: 100%;
width: auto;
}

.swiper-container .customcontainer {
max-width: 100px;
min-width: 100px;
max-height: 100px;
min-height: 100px;
overflow: hidden;
}

.imgthumb {
text-align: center;
}
`

typescript

`
import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from "@angular/core";

import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Virtual, Zoom, Autoplay, Thumbs, Controller, Swiper } from 'swiper/core';
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Virtual, Zoom, Autoplay, Thumbs, Controller]);
import { Carouselobject } from "../../helperclasses/Carouselobject";

@component({
templateUrl: './carousel.component.html',
styleUrls: ['./carousel.component.scss'],
selector: 'carousel'
})
export class CarouselComponent implements AfterViewInit {

swiper: SwiperCore;
private _thumbSwiper: SwiperCore;
public get thumbSwiper(): SwiperCore {
    return this._thumbSwiper;
}
public set thumbSwiper(value: SwiperCore) {
    this._thumbSwiper = value;
}

private _dataCarousel: Array<Carouselobject>;
@Input()
get dataCarousel(): Array<Carouselobject> {
    return this._dataCarousel;
}
set dataCarousel(value: Array<Carouselobject>) {
    if (this._dataCarousel != value) {
        this._dataCarousel = value;
        if (value.length >= 1) {
            this.selectedCarouselObject = value[0];
        }
    }
}

private _selectedCarouselObject: Carouselobject;
@Input()
get selectedCarouselObject(): Carouselobject {
    return this._selectedCarouselObject;
};
set selectedCarouselObject(value) {
    if (this._selectedCarouselObject !== value) {
        this._selectedCarouselObject = value;
        this.selectedCarouselObjectChange.emit(this._selectedCarouselObject);
    }
}
@Output() selectedCarouselObjectChange: EventEmitter<Carouselobject> = new EventEmitter();

onSlideChange(swiper: SwiperCore) {
    this.selectedCarouselObject = this.dataCarousel[swiper.realIndex];
}

ngAfterViewInit(): void {
    this.thumbSwiper = new SwiperCore('.thumbSwiper', {
        lazy: {
            loadPrevNext: true
        },
        breakpoints:
        {
            250: { slidesPerView: 2, spaceBetween: 25 },
            500: { slidesPerView: 3, spaceBetween: 25 },
            750: { slidesPerView: 4, spaceBetween: 25 },
            1000: { slidesPerView: 5, spaceBetween: 25 },
            1250: { slidesPerView: 6, spaceBetween: 25 },
            1500: { slidesPerView: 7, spaceBetween: 25 },
            1750: { slidesPerView: 8, spaceBetween: 25 },
            2000: { slidesPerView: 9, spaceBetween: 25 },
            2250: { slidesPerView: 10, spaceBetween: 25 },
            2500: { slidesPerView: 11, spaceBetween: 25 },
            2750: { slidesPerView: 12, spaceBetween: 25 },
            3000: { slidesPerView: 13, spaceBetween: 25 }
        },
    });
}

setThumbSwiper(swiper: SwiperCore) {
    this._thumbSwiper = swiper;
}

}
`