Question

您好我试图在PC上设置滑块的动态宽度（容器的100％）和静态高度（550px）。在移动设备上它应该是响应。有我的代码：

<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>

以下是我尝试过的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);

        }

如何让我的滑块在PC上始终具有100％宽度的容器和静态550px的高度？

Answer 1

Jssor滑块始终保持纵横比，同时缩放。您可以使用$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);

    }

Answer 2

appDelegate

滑块的Jssor刻度高度

2 个答案: