Carousel loop not working on HTML content

[georgescubogdan]

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

[Arashatami]

the same issue

[maranmaran]

Confirm, reproduced the same thing.

[Arashatami]

@drozhzhin-n-e

[devduv]

Reproduced the same issue, not lopping uu This's my code: ts: this.images = [ { path: './assets/images/portada.png' }, { path: './assets/images/fisi.jpg' }, { path: './assets/images/bigdata.jpg' }, ]; html: <carousel #myCarousel (events)="handleCarouselEvents($event)" [images]="images" [cellWidth]="'100%'" [loop]="true" [height]="350" [dots]="true" [lightDOM]="true" [autoplay]="true" [autoplayInterval]="1500"> </carousel>

[drozhzhin-n-e]

loop for html content not made yet

[kiknadze]

are u going to add this feature?

[northern1317]

Same problem, loop not working

[kiknadze]

As I figure out loop does not working on custom HTML content

[drozhzhin-n-e]

Yes, I'm going to add this feature in the coming months.

[siddharth318]

Hi author, when are you planning to add this feature?

[heidiliu2020]

Same problem I am facing.

[xhate83]

Today this issue persist, Angular v 13, loop don't work

[ribamartins]

Hi,

Same problem here. Any news about this issue?

[ribamartins]

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>

`

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

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

Now the loop is work. :-)

[mojtabanpe]

install angular-responsive-carousel2

[gramai]

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. :-)

.carousel-cell img:first-of-type { display: none; } didn't work for me as I had other images in the carousel. But assigning the 'path' value of the images to the path of a very small and transparent image in assets worked. Thanks a lot!