Possibility to add and remove items dynamically

[sayhicoelho]

What is the proper way to add/remove items dynamically?

[sheikalthaf]

I'm already working on it. I will inform you once ti get ready

[saravanakumarkvk]

I have code fix this. we need to update transformstyle to zero.

[harshi1991]

Hi @saravanakumarkvk : Do you know the fix for this? If I add and remove an item dynamically, a blank screen appears in the carousel when I reopen it in a model.

[sayhicoelho]

After hours and days trying to solve this issue, I switched to https://github.com/zefoy/ngx-swiper-wrapper that gave me a light!

Now I can add/remove items dynamically in my carousel.

[harshi1991]

Thanks for the suggestion @renandiett . I am trying to use ngx-swipper-wrapper now but facing issues with it as well. Next and prev buttons are not working. Can you pleas let me know if you faced the same and how you solved it. I am using version 4.7.0.

[sayhicoelho]

@harshi1991 Sorry for the long time to reply! See my issue at https://github.com/zefoy/ngx-swiper-wrapper/issues/90

[saravanakumarkvk]

I have the fix. shall i explain how to close this issue?

[sayhicoelho]

Please show us the fix?

[saravanakumarkvk]

we can fix in two way. in front end with styles or we need to do fix in core javascript page.
First way to fix : On dynamic change values, we can add this styles
var el = document.getElementsByClassName('ngxcarousel-items')[0];
el.setAttribute('style', "transform: none !important");
Second way 👍 we need to add this one extra condition in buttonControl function(ngx-carousel.component.js file) replace below condition in the existing function.

NgxCarouselComponent.prototype.buttonControl = function () {
if (!this.data.loop || (this.data.isFirst && this.data.isLast)) {
this.setStyle(this.leftBtn, 'display', this.data.isFirst ? 'none' : 'block');
this.setStyle(this.rightBtn, 'display', this.data.isLast ? 'none' : 'block');
}
else {
this.setStyle(this.leftBtn, 'display', 'block');
this.setStyle(this.rightBtn, 'display', 'block');
}

    if(this.userData.grid[this.data.deviceType] >= this.carouselItems.length){
        this.setStyle(this.leftBtn, 'display', 'none');
        this.setStyle(this.rightBtn, 'display', 'none');
           this.transformStyle(0);
    }
};

[sheikalthaf]

@renandiett @saravanakumarkvk @harshi1991 @iamlothian This carousel is depreciated. I actively maintaining the @ngu/carousel . This issue is fixed in ngu-carousel