简体   繁体   English

滑块的Jssor刻度高度

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM