Encountering an issue with the relative dimensions of the slider container in IE11 (Jssor 18.0).
Here is the HTML structure:
- An outer div with specified absolute dimensions (width and height in pixels).
- An inner div, serving as the slider's container, with relative dimensions (width and height set to 100%).
The slider functions correctly in Firefox 38 and Chrome 43. However, when tested in IE11 and other versions like IE9 and IE10, the following error message appears:
Error: Cannot scale jssor slider, 'dimension' of 'outer container' not valid. Please specify 'dimension' in pixels. For example, 'dimension: 600px;'
Using absolute dimensions ensures consistent performance across all browsers.
The main query is whether it is possible to utilize relative dimensions for the slider container in IE11?
CSS and HTML code snippet:
.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>Access the JSFiddle link for demonstration.