This question brings up an interesting concept. Initially, we will establish two arrays:
- a
masterArray containing all the URLs of images;
- an
imagesArray linked to the carousel, starting with only one image. This means that upon page load, only a single image is loaded.
- We simply transfer a URL from the
masterArray into the imagesArray during each slide change event (named activeSlideChange);
relevant HTML for a single slide carousel:
<carousel (activeSlideChange)='gotChange()'>
<slide *ngFor="let img of imagesArray; let idx of index" >
<img src="{{img}}" alt="slide {{idx}}" style="display: block; width: 100%;">
</slide>
</carousel>
relevant TS code for a single slide carousel:
import { Component, ViewChild } from '@angular/core';
import { CarouselComponent } from 'ngx-bootstrap';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(CarouselComponent) myCarousel: CarouselComponent;
name = 'Angular';
masterArray = ['URLs of images here'];
imagesArray = ['Initial image URL here'];
loopcomplete: boolean = false;
constructor() { }
gotChange() {
console.log('Slider changed', this.myCarousel.activeSlide);
if (!this.loopcomplete) {
if (this.myCarousel.activeSlide + 1 < this.masterArray.length) {
this.imagesArray.push(this.masterArray[this.myCarousel.activeSlide + 1]);
} else { this.loopcomplete = true; }
}
}
}
See the complete functioning stackblitz here
The following image demonstrates the lazy loading of images:
https://i.sstatic.net/RQUTt.png
UPDATE: Considering the comment from the asker below... the relevant event is now identified as slideRangeChange
relevant HTML for a multi-slide carousel:
<carousel [itemsPerSlide]="itemsPerSlide"
[singleSlideOffset]="singleSlideOffset"
[noWrap]="noWrap"
(activeSlideChange)='gotChange()'
(slideRangeChange)='gotRangeChange()'
[showIndicators]='false'
[interval]='false'
>
<slide *ngFor="let img of imagesArray; let idx of index" >
<img [src]="img" alt="slide {{idx}}" style="display: block; width: 100%;">
</slide>
</carousel>
relevant TS code for a multi-slide carousel:
import { Component, ViewChild } from '@angular/core';
import { CarouselComponent } from 'ngx-bootstrap';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(CarouselComponent) myCarousel: CarouselComponent;
name = 'Angular';
masterArray = ['URLs of images here'];
imagesArray = ['Initial image URLs here'];
loopcomplete: boolean = false;
itemsPerSlide = 2;
singleSlideOffset = true;
noWrap = true;
activeRange = 0;
constructor() { }
gotRangeChange() {
if (!this.loopcomplete) {
if (this.activeRange + 2 < this.masterArray.length) {
this.activeRange = this.activeRange + 2;
this.imagesArray = this.imagesArray.concat(this.masterArray[this.activeRange]);
this.imagesArray = this.imagesArray.concat(this.masterArray[this.activeRange + 1]);
} else {
this.loopcomplete = true;
}
}
}
}
Check out the working stackblitz for the multi-slide carousel here