[英]jssor slider responsive Angular 2
我已經按照這個答案在angular2中添加了jssor。 我已將下面的javascript代碼添加到文件中,並在angular-cli.json中調用。
jssor_1_slider_init = function() {
var jssor_1_options = {
$AutoPlay: true,
$AutoPlaySteps: 4,
$SlideDuration: 160,
$SlideWidth: 200,
$SlideSpacing: 3,
$Cols: 4,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$Steps: 1
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$SpacingX: 1,
$SpacingY: 1
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 809);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
};
我觀察到ScaleSlider()函數用於縮放滑塊但不調用。
如何在角度2中使其響應?
/*responsive code begin*/
/*remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 809);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*responsive code end*/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.