angujar js 2 Owl Carousel响应选项不起作用

Question

我正在使用Angular 2 我想让它成为响应式旋转木马

<owl-carousel [options]="{nav : true, slideBy : 2 ,margin :14  }"


</owl-carousel>

这没有响应

工作正常

但是当我想在其显示错误时添加响应选项

但是当我在选项中添加响应代码时显示错误

但是在运行时项目浏览器显示此下面的错误 任何人都可以帮助我，创建响应式ng2-owl-carousel

Answer 1

<div class="col-md-10 offset-md-1 col-xs-12">
          <owl-carousel [options]="{responsive:{
    '320':{
        items:1

    },
    '600':{
        items:3

    },
     '980':{
        items:4,
       nav:true,
      dots: true

    }

  }}" [items]="viewCustomObjectList" [carouselClasses]="['owl-theme', 'row', 'sliding']">

这对我有用。

Answer 2

你可以在课堂上添加选项，例如我在home.compnent.ts上添加了一个滑块选项，如下所示

 public sliderOPT: any ={nav:true,dots:false,loop:true,autoPlay:true,autoPlayTimeout:5000,autoplayHoverPause:true,items:4,
    navText: this.arrow,
    responsiveClass:true,
    responsive: {
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }

}

并在owl carousel标签（选项属性）

上调用它

<owl-carousel  
[options]="sliderOPT"
[carouselClasses]="['owl-theme','offer_box','mainSlider1', 'row', 'sliding']">
*
*
*
</owl-carousel>

Answer 3

这应该是JSON结构，因为它是一个字符串，你必须用引号

来区分这些项目

{
  responsive:{
    '320':{
        items:1

    },
    '720':{
        items:3

    }
  }
}