[英]Jssor scale height of slider
Hello I'm trying to set dynamic width (100% of container) and static height(550px) of slider on PC. 您好我正在尝试在PC上设置滑块的动态宽度(容器的100%)和静态高度(550px)。 On mobile it should be responsive.
在移动设备上它应该是响应。 There is my code:
有我的代码:
<div class="col-md-6 right-col" id="sliders">
<div id="slider0" style="position: relative; top: 0px; left: 0px; width: 712px; height: 550px; overflow: hidden; ">
<div u="slides" class="slides2" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 712px; height: 550px; overflow: hidden;">
<div data-id="0">
<img u="image" src='<?php echo get_template_directory_uri(); ?>/images/grey.gif' data-original="<?php echo get_template_directory_uri(); ?>/images/w1.jpg" />
</div>
<div data-id="1">
<img u="image" src='<?php echo get_template_directory_uri(); ?>/images/grey.gif' data-original="<?php echo get_template_directory_uri(); ?>/images/w2.jpg" />
</div>
<div data-id="2">
<img u="image" src='<?php echo get_template_directory_uri(); ?>/images/grey.gif' data-original="<?php echo get_template_directory_uri(); ?>/images/w3.jpg" />
</div>
</div>
<span u="arrowleft" class="jssora13l" style="top: 123px; left: 0px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora13r" style="top: 123px; right: 5px;">
</span>
</div>
</div>
Here is what I've tried with scaleWidth and height but it didnt goes with 100% width.. 这是我尝试过的scaleWidth和height,但它并没有100%的宽度..
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
console.log(parentWidth);
if(parentWidth > 798){
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 954));
}else if (parentWidth > 720 && parentWidth >= 797){
jssor_slider1.$ScaleWidth(816);
jssor_slider1.$ScaleHeight(550);
}
else
window.setTimeout(ScaleSlider, 30);
}
How can I make that my slider have always 100% width of container and static 550px of height on PC? 如何让我的滑块在PC上始终具有100%宽度的容器和静态550px的高度?
Jssor slider always keeps aspect ratio while scale. Jssor滑块始终保持纵横比,同时缩放。 You can use either
$ScaleWidth
or $ScaleHeight
. 您可以使用
$ScaleWidth
或$ScaleHeight
。
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
console.log(parentWidth);
if(parentWidth) {
if(parentWidth > 798){
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 954));
}
else if (parentWidth > 720 && parentWidth >= 797) {
jssor_slider1.$ScaleWidth(816);
}
else {
jssor_slider1.$ScaleWidth(parentWidth);
}
}
else
window.setTimeout(ScaleSlider, 30);
}
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
var refSize1 = jssor_1_slider.$Elmt.parentNode.clientHeight;
if (refSize) {
refSize = Math.min(refSize, 830);
refSize1 = Math.min(refSize1, 617);
jssor_1_slider.$ScaleWidth(refSize);
jssor_1_slider.$ScaleHeight(refSize1);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.