Title: jssor slider responsive code works but doesn't restore when browser width is full
Tags: jssor
Question: jssor is very nice slider! It is working well for a dynamically generated images. Thank you for the great tool. There is only one problem that remains.
The width of the slider container is 640px and I wanted the container to resize when the external container div becomes small. I does it well to diminish the image as desired. However,
1. when I resize the browser again and make a new image search. The slider occupy the entire external div width. So it only appear filling the entire area more than 640px width.
2. The responsiveness doesn't work on mobile devices. I tested in chrome and android browser both in android devices.
The codes I was using
Code 1:
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = $("#slider1_container").parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
Code 2:
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
if ( $(window).width() &gt; 900 ) {
function ScaleSlider() {
var parentWidth = $("#slider1_container").parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
}
//Scale slider after document ready
ScaleSlider();
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
//Capture window resize event
$(window).bind("resize", ScaleSlider);
}

Here is the accepted answer: Please scale the slider no more than 640 in width.
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = $("#slider1_container").parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 640));
}
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
Comment for this answer: I tested the code on desktops and it works to re-size and on new search request, it maintains the size. However, it doesn't re-size on first load. I have to resize browser width to make it fit in the div or I have to rotate mobile device to make it resize to fit in the window. Is it possible to make it detect the window size and adjust on first load.
Comment for this answer: Thank you very much! It works now! As you said, I added width:100% to the two containers. They had no width set before. Keep up the great work mate.
Comment for this answer: I found one small problem now. On initial load, images become very small. I will try and report back after my attempt.
Comment for this answer: I tried chainging all the width and height of parent divs to 100% and even setting min-height but the slideshow still loads very small and when new search is made, it loads properly.
Comment for this answer: I get a value of 100. What should I do now?
Comment for this answer: the meta viewport was already added. The cause of the problem is found! The slideshow was inside a tab and the parent size becomes 100px because it is hidden I guess. So I changed var parentWidth like this.
Comment for this answer: var parentWidth = $(".resulttab").width() - 90; div resulttab is a bigger container but it never get hidden so I used its width. Thank you very much!
Comment for this answer: It should have worked. Please check your css and parent width on first load.
Comment for this answer: you can write down the parent width document.writeln($("#slider1_container").parent().width());
Comment for this answer: Please check your code out to see why the width of parent container is 100. Btw, please add  in your head tag.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2014:00:12/01/14', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<jssor>', 'Title': "jssor slider responsive code works but doesn't restore when browser width is full", 'ViewCount': 964, 'id': 27229306, 'user_AboutMe': '<p>Coding is fun...</p>\n', 'user_AccountId': 4521506.0, 'user_DisplayName': 'wondim', 'user_Reputation': 679.0, 'user_Views': 107.0, 'user_id': 3674573.0}}