angular-carousel: Carousel loop not working on HTML content

My code:

<carousel #myCarousel style="height: 400px;"
    [cellWidth]="'100%'"
    [arrows]="true"
    [loop]="true">
        <div *ngFor="let project of projects" class="carousel-cell" style="display: flex; height: 50vh;">
                <div class="proj-img shadow" style="background-image: url({{project.img}});"></div>
                <div class="proj-display">
                    <h3>{{project.name}}</h3>
                    <p>{{project.text}}</p>
                    <div class="d-flex flex-wrap justify-content-between btn-container">
                        <button class="main-btn" routerLink="{{project.routerLink}}">Vizioneaza proiectul</button>
                        <h5 class="call-to-action" routerLink="projects">Vezi toate proiectele ></h5>
                    </div>
                </div>
        </div>
    </carousel>

If I use an images array it works, but it doesn’t when using custom html and ngFor

About this issue

Original URL
State: open
Created 4 years ago
Comments: 16 (2 by maintainers)

Most upvoted comments

Guys,

I got a workaround to make the loop work with HTML. Analyzing the source code of component, the loop only works if the property [images] is filled. So suppose the carousel has five pages. You will need to create an array of any containing 5 objects, as shown in the code below:

_images: any[] = [ {path: '', width: 0, height: 0}, {path: '', width: 0, height: 0}, {path: '', width: 0, height: 0}, {path: '', width: 0, height: 0}, {path: '', width: 0, height: 0} ];

Then you fill in the [images] property referencing the created array:

<carousel [cellWidth]="'100%'" [height]="800" [autoplay]="true" [loop]="true" [arrows]="false" [transitionDuration]="600" [autoplayInterval]="5000" [images]="_images"> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> </carousel>

Finally, put the following css code to hide the created images:

.carousel-cell img:first-of-type { display: none; }

Now the loop is work. 😃

ribamartins on Jan 23, 2022

the same issue

Arashatami on Dec 23, 2020