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

时间:2017-03-24 06:47:56

标签: angular owl-carousel

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

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


</owl-carousel>

这没有响应

工作正常

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

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

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

3 个答案:

答案 0 :(得分:2)

<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']">

这对我有用。

答案 1 :(得分:0)

你可以在课堂上添加选项,例如我在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>

答案 2 :(得分:-2)

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

来区分这些项目
{
  responsive:{
    '320':{
        items:1

    },
    '720':{
        items:3

    }
  }
}