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$(...;

Jssor - 响应滑块的初始比例

1 个答案: