Вот одно из возможных решений:
Отдельная настольная и мобильная версия:
Разделите версию для настольного компьютера с мобильной версией, используя ngb-карусель для каждой версии, выбранную с помощью * ngIf. * NgIf проверяет переменную mobile, определяемую (см. Html ниже):
ngOnInit() {
if (window.screen.width === 360) { // 768px portrait
this.mobile = true;
}
}
Подробнее об этом в этот вопрос .
Слайдер
Для мобильной версии используйте ваш код (я интегрировал его ниже)
Для рабочего стола с несколькими изображениями:
Разделите ваш массив на многомерный массив (первое измерение для слайдов, второе измерение для изображений). Если у вас есть 2 слайда из 3 изображений, ваш массив будет 2 * 3.
this.games = ["a", "b", "c", "d", "e"];
this.gamesFormatted = [];
var j = -1;
for (var i = 0; i < this.games.length; i++) {
if (i % 3 == 0) {
j++;
this.gamesFormatted[j] = [];
this.gamesFormatted[j].push(this.games[i]);
}
else {
this.gamesFormatted[j].push(this.games[i]);
}
}
Показ карусели с двойной петлей:
<div *ngIf="games">
<!-- Mobile section : one image per slide -->
<ngb-carousel *ngIf="mobile" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide *ngFor="let image of games">
<div class="" style="">
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-6">
<img class="" src="{{image.title_img}}">
</div>
</div>
</ng-template>
</ngb-carousel>
<!-- Desktop section : multiple images per slide -->
<ngb-carousel *ngIf="!mobile" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide *ngFor="let group of gamesFormatted">
<div class="" style="" *ngFor="let game of group">
<img class="" src="{{game.title_img}}">
</div>
</ng-template>
</ngb-carousel>
</div>
Я не тестировал html-часть, поэтому, безусловно, есть улучшения, которые нужно сделать.