owl-carousel-o responsive option is not working Angular

[shahzadpydev]

customer-review.component.ts

customOptionsforslider = {
    loop: false,
    nav: true,
    dots: false,
    mouseDrag: true,
    touchDrag: true,
    pullDrag: true,
    lazyLoad: true,
    margin: 30,
    smartSpeed: 500,
    autoplayTimeout: 1000,
    autoplayHoverPause: true,
    responsiveClass:true,
    navText: ['', ''],
    responsive: {
      0: {
        items: 1.25,
      },
      576: {
        items: 2.25,
      },
      768: {
        items: 3,
      },
      1024: {
        items: 4,
      },
      1280: {
        items: 4,
      },
    },

  };

customer-review.component.html

<owl-carousel-o [options]="customOptionsforslider"></owl-carousel-o>

style.scss

@import '~ngx-owl-carousel-o/lib/styles/scss/owl.theme.default';
@import '~ngx-owl-carousel-o/lib/styles/scss/owl.carousel';

Angular 7.2.9 ngx-owl-carousel-o ^2.0.3

First time slider load correct when we resize the screen or change the device width slider will not re arrange or re initialize itself. UI of slider will be broken after the screen change

[vitalii-andriiovskyi]

Hi @shahzadpydev

Sorry for the late answer. items in the responsive option must be integer.

Maybe this is not your case, but... In the description of the issue, you didn't mentioned about setting own id for slides. Mostly the carousel disappear when id's aren't strings. id's must have the type string. If you defined ids as numbers, you'll get the same problem, you have.