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!

[Gvero98]

Has anyone found a way to enable the previous arrow to navigate from the first slide directly to the last slide, without having to complete a full loop by clicking next? Currently, I can only go to the last slide from the first after completing a full loop. Once I return to the first slide, the previous arrow works as expected and takes me to the last slide. However, before completing the loop, the previous arrow is disabled on the first slide.