Jssor - 响应式滑块的初始比例

Question

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

我在那里，一切正常，只有在我重新调整窗口大小时。如果我在加载时将窗口的高度和/或宽度重新调整为高于初始窗口的大小，它就会开始在第二张幻灯片上产生一些问题。

如果有什么我能做的，我会很高兴得到指导。

更新：

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

我为我的两张幻灯片添加了额外的 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>

Answer 1

容器、slides 容器和幻灯片元素应以像素格式 (...px) 指定为固定大小。然后请修改slide_container、slide_wrap和image_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$(...;