我正在使用Angular 2 我想让它成为响应式旋转木马
<owl-carousel [options]="{nav : true, slideBy : 2 ,margin :14 }"
</owl-carousel>
这没有响应
工作正常但是当我想在其显示错误时添加响应选项
但是当我在选项中添加响应代码时显示错误
答案 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
}
}
}