Jssor - Initial scale for responsive slider

Question

I'm working on a two slides slider using jssor fantastic scripts. the first slide is a photo + text, and the second a YouTube player. I need my slides to be responsive so I took a chance and worked on some CSS to make it works.

I'm quite there and everything works perfectly, only while I re-size the window down. If I re-size the window's height and/or width above the initial window's size when loaded, it starts to create some issues with the second slide.

If there is something I could do I would be glad to receive guidance.

UPDATE:

In my case, the ScaleSlider() method doesn't help cause I have a fixed div sized on the viewport width and height, and I need the slider to adapt to this div. Using the scaling method would cause the video player controls and part of the image to disapear / overlap some part of the content depending on the image size.

I've added extra css class to my two slides, as well as a resize function to adjust content when the window get resized. however, this doesn't fixe my issue entirely. Everything get resized but the video frame doesn't when the window's size is above its initial load width and height.

here is a full code sample. This bit assume you have the scripts as well as the icons sources required in the CSS bits.

<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

The container, slides container and slide element should be specified with fixed size in pixel format (...px). Please modify css for slide_container, slide_wrap and image_slide rules then.

Please use scripts to make your slider responsive.

//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

Edit:

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