Question

我正在尝试在4个表中实现4页的应用程序。它应该是支持滑动手势，每个页面包含动态数据并使页面具有不同的高度。

我尝试使用responsive-slider-div-span.source示例并将4个表格集成到幻灯片中。

我想在文档就绪时动态设置幻灯片的宽度和高度，但是，如果未在幻灯片div中预先设置宽度和高度，幻灯片将不会显示。

我可以知道任何建议吗？

Answer 1

通常，jssor滑块的大小是在html代码中定义的，您可以用语法来改变大小。

给定尺寸为600x300的滑块，您可以在初始化jssor滑块之前使用javascript更改大小。

<script>

    jQuery(document).ready(function ($) {
        var options = {};

        //retrieve height of the slider, assuming the height should be 200px;
        $("#slider1_container").height("200px");
        $("#slider1_slides").height("200px");

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        //According to your comment, please add following code
        //Handle $EVT_PARK event BEGIN
        function OnSliderPark(slideIndex, fromIndex) {
            if (slideIndex == 0 || slideIndex == jssor_slider1.$SlidesCount() - 1) {
                //do something scroll page to top
            }
        }

        jssor_slider1.$On($JssorSlider$.$EVT_PARK, OnSliderPark);
        //Handle $EVT_PARK event END
    });
</script>

<div id="slider1_container" style="... width: 600px; height: 300px; ...">
    <div u="slides" id="slider1_slides" style="... width: 600px; height: 300px; ...">
        ...
    </div>
</div>

移动页面滑块内容具有动态高度

1 个答案: