Jssor Slider - Relative dimensions cause error in IE11

Question

I have problem with relative dimensions of the slider container in IE11 (Jssor 18.0).

HTML structure:

• There's an outer div with absolute dimensions (width and height in pixels).
• There's inner div, the one for which the slider is created, with relative dimensions (width = height = 100%).

The slider works well in Firefox 38 and Chrome 43. In IE11 the following error occurs (well - any IE, I tried IE9, IE10 and IE11):

Cannot scale jssor slider, 'dimension' of 'outer container' not valid. Please specify 'dimension' in pixel. e.g. 'dimension: 600px;'

With absolute dimensions, the slider works equally in all browsers.

The question is, can I use relative dimensions of the slider container in IE11?

CSS and HTML:

    .npw-banner {
        width: 720px;
        height: 480px;
    }
    .npw-banner .npw-slider-container {
        width: 100%;
        height: 100%;
    }

    <!-- outer div with absolute dimensions -->
    <div class="npw-banner">
        <!-- slider div with relative dimensions -->
        <div id="banner_slider_container" class="npw-slider-container">
            <div class="npw-slides" u="slides">...</div>
            <div u="navigator" class="npw-navigator">...</div>
        </div>
    </div>

Here's the fiddle.

Answer 1

Jssor Slider requries width/height specified in pixels. See the documentation for details - http://www.jssor.com/development/reference-ui-definition.html.

If there's a constraint and the dimensions cannot be specified in pixels, you can use jQuery to compute the absolute values.

Example:

var $container = $("#" + containerId);

var containerWidth = $container.width();
var containerHeight = $container.height();

$container.width(containerWidth);
$container.height(containerHeight);