Javascript Jssor-响应滑块的初始刻度

我正在使用jssor奇妙的脚本制作一个两张幻灯片的滑块。 第一张幻灯片是照片+文本，第二张幻灯片是YouTube播放器。我需要我的幻灯片有响应性，所以我抓住了一个机会，并在一些CSS工作，使其工作

我在那里，一切都很好，只有在我把窗户缩小的时候。如果在加载时将窗口的高度和/或宽度重新调整到初始窗口大小之上，则第二张幻灯片会出现一些问题

如果有什么我能做的，我很乐意接受指导

更新：

在我的例子中，ScaleSlider（）方法没有帮助，因为我在视口宽度和高度上有一个固定的div大小，我需要滑块来适应这个div。使用scale方法会导致视频播放器控件和部分图像根据图像大小取消/重叠部分内容

我在我的两张幻灯片中添加了额外的css类，以及一个调整大小的函数，用于在调整窗口大小时调整内容。然而，这并不能完全解决我的问题。所有内容都会调整大小，但当窗口大小高于其初始加载宽度和高度时，视频帧不会调整大小

这是一个完整的代码示例。此位假定您拥有CSS位中所需的脚本和图标源

<div id="container">
<div id="slider1_container" class="slide_container">
        <!-- Slides Container -->
        <div u="slides" class="slide_wrap">
            <div class="image_slide">
                <p>Open the browser with a reduced size (vw), then resize up to discover my issue.</p>
            </div>
            <div>
                <div u="player" id="player_f" class="video_slide">
                    <!-- iframe in ebay page is not allowed, youtube iframe video is not supported for ebay listing -->
                    <iframe pHandler="ytiframe" pHideControls="1" controls="0" width="640" height="390" style="z-index: 0;" url="https://www.youtube.com/embed/WKP4CS7QwdE" frameborder="0" scrolling="no"></iframe>
                </div>

            </div>

        </div>

        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora03l" style="top: 50%; left: 8px;">
        </span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora03r" style="top: 50%; right: 8px;">
        </span>
        <!--#endregion Arrow Navigator Skin End -->
        <a style="display: none" href="http://www.jssor.com">Image Slider</a>
        <!-- Trigger -->
    </div>
</div>

<style>

body{
    margin:0 auto;
}

#container{
    width:100%;
    height:100%;
}
/* jssor slider bullet navigator skin 03 css */
/*
            .jssorb03 div           (normal)
            .jssorb03 div:hover     (normal mouseover)
            .jssorb03 .av           (active)
            .jssorb03 .av:hover     (active mouseover)
            .jssorb03 .dn           (mousedown)
            */
            .jssora03l, .jssora03r {
                display: block;
                position: absolute;
                /* size of arrow element */
                width: 55px;
                height: 55px;
                cursor: pointer;
                background: url(img/a17.png) no-repeat;
                overflow: hidden;
            }
.jssora03l { background-position: -3px -33px; }
.jssora03r { background-position: -63px -33px; }
.jssora03l:hover { background-position: -123px -33px; }
.jssora03r:hover { background-position: -183px -33px; }
.jssora03l.jssora03ldn { background-position: -243px -33px; }
.jssora03r.jssora03rdn { background-position: -303px -33px; }
.closeButton { background-image: url(/img/close.png); }
.closeButton:hover { background-position: -30px 0px; }

.slide_container{
    position: relative; 
    top: 0px; 
    left: 0px; 
    width: 100vw;
    height: 100vh;
}

.slide_wrap{
    cursor: move; 
    position: relative; 
    left: 0px; 
    top: 0px; 
    width: 100vw; 
    height: 100vh;
    overflow: hidden;
}

.image_slide{
    position: relative; 
    top: 0px; 
    left: 0px;
    width: 100vw!important; 
    height: 100vh!important; 
    overflow: hidden;
    background-image: url(http://placeharold.com/1920/1080);
    background-position: center center;
    background-size: cover;

    display:table;
    text-align:center;
}

.image_slide > p {
    display: table-cell;
    vertical-align: middle;
    padding:120px;
    color:white;
    font-size:32px;
    text-shadow: 2px 2px 2px #000000;
    font-family:Raleway;


}

.video_slide{
    position: relative; 
    top: 0px; 
    left: 0px; 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden;
}

.video_slide iframe{
    width:100vw;
    height:100vh;
}
</style>

<script src="jssor.slider.min.js"></script>
<!-- <script type="text/javascript" src="js/jssor.player.ytiframe.js"></script> not used -->
<script type="text/javascript" src="jssor.player.ytiframe.min.js"></script>

<script>
jssor_slider1_starter = function (containerId) {
            var options = {
                $AutoPlay: false,
                $DragOrientation: 3,
                $AutoPlayInterval: 4000,
                $PauseOnHover: 1,
                $ArrowKeyNavigation: true,
                $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 0,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
                }
            };
            var jssor_slider1 = new $JssorSlider$(containerId, options);

            //fetch and initialize youtube players
            $JssorPlayer$.$FetchPlayers(document.body);
        };

    // Init Slider
    jssor_slider1_starter('slider1_container');
</script>

以缩小的尺寸（vw）打开浏览器，然后向上调整大小以发现我的问题

身体{
保证金：0自动；
}
#容器{
宽度：100%；
身高：100%；
}
/*jssor滑块项目符号导航器皮肤03 css*/
/*
.JS03分区（正常）
.jssorb03分区：悬停（正常鼠标悬停）
.jssorb03.av（活动）
.jssorb03.av：悬停（活动鼠标悬停）
.jssorb03.dn（鼠标向下）
*/
.jssora03l、.jssora03r{
显示：块；
位置：绝对位置；
/*箭头元素的大小*/
宽度：55px；
高度：55px；
光标：指针；
背景：url（img/a17.png）不重复；
溢出：隐藏；
}
.jssora03l{背景位置：-3px-33px；}
.jssora03r{背景位置：-63px-33px；}
.jssora03l:悬停{背景位置：-123px-33px；}
.jssora03r:悬停{背景位置：-183px-33px；}
.jssora03l.jssora03ldn{背景位置：-243px-33px；}
.jssora03r.jssora03rdn{背景位置：-303px-33px；}
.closeButton{背景图像：url（/img/close.png）；}
.closeButton:悬停{背景位置：-30px 0px；}
.滑盖容器{
位置：相对位置；
顶部：0px；
左：0px；
宽度：100vw；
高度：100vh；
}
.滑套{
光标：移动；
位置：相对位置；
左：0px；
顶部：0px；
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
.幻灯{
位置：相对位置；
顶部：0px；
左：0px；
宽度：100vw！重要；
高度：100vh！重要；
溢出：隐藏；
背景图片：url(http://placeharold.com/1920/1080);
背景位置：中心；
背景尺寸：封面；
显示：表格；
文本对齐：居中；
}
.image_幻灯片>p{
显示：表格单元格；
垂直对齐：中间对齐；
填充：120px；
颜色：白色；
字体大小：32px；
文本阴影：2PX2PX2PX000000；
字体系列：雷威；
}
.视频幻灯片{
位置：相对位置；
顶部：0px；
左：0px；
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
.video_幻灯片iframe{
宽度：100vw；
高度：100vh；
}
jssor\u滑块1\u启动器=功能（容器ID）{
变量选项={
$AutoPlay:false，
$DRAGORIENTION:3，
$AutoPlayInterval:4000，
$PauseOnHover:1，
$ArrowKeyNavigation:true，
$ArrowNavigatorOptions:{//[可选]用于指定和启用或不启用箭头导航器的选项
$Class:$jssorarrowsnavigator$，//[Required]类创建箭头导航器实例
$ChanceToShow:2，//[必需]0从不，1次鼠标悬停，2次始终
$AutoCenter:0，//[可选]父容器中的自动居中箭头，0个，1个水平，2个垂直，3个两者，默认值为0
$Steps:1//[可选]每个导航请求的步骤，默认值为1
}
};
var jssor_slider1=新的$JssorSlider$（containerId，选项）；
//获取并初始化youtube播放器
$JssorPlayer$.$FetchPlayers（document.body）；
};
//初始滑块
jssor_滑块1_启动器（“滑块1_容器”）；

容器、

幻灯片

容器和幻灯片元素应以像素格式（…px）指定固定大小。请修改

slide\u container

、

slide\u wrap

和

image\u slide

规则的css

请使用脚本使滑块响应

//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
    var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
    if (parentWidth)
        jssor_slider1.$ScaleWidth(Math.min(parentWidth, 600));
    else
        window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();

$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end

编辑：

//before initialization of jssor slider
//you can set slider container size dynamically according to window size.
var jssor_slider1 = new $JssorSlider$(...;

---

这种方法没有帮助，因为我需要滑块来适应基于视口宽度和高度的div。使用缩放方法会导致幻灯片内容部分不可见，就像使用视频幻灯片时视频播放器控件一样。代码是相当工作，我只需要得到覆盖的初始滑块的高度和宽度