javascript - slider 的 Jssor 刻度高度

Question

您好，我正在尝试在 PC 上设置 slider 的动态宽度(容器的 100%)和静态高度(550 像素)。在手机上它应该是响应式的。这是我的代码:

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

        }

如何使我的 slider 在 PC 上始终具有 100% 的容器宽度和静态 550 像素的高度？

Answer 1

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

    }