i'm fine with this scale code:
var MAX_WIDTH = 2000;
function ScaleSlider() {
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
but it makes a problem for slider. actually my slider option is this:
var jssor_1_options = {
$AutoPlay: 0,
$SlideWidth: 200,
$SlideSpacing: 5,
$Loop: 0,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$Steps: 3
}
}
that means it shows many images together because of "$SlideWidth: 200"
i used 12 images. but when i run the slider, it shows just about 6 or 7 image, and it thinks that the slider is finished. cant slide more than these 6 or 7.
and u should know when i delete "$Loop: 0" it works correctly.
this is a sample of my code: https://code.sololearn.com/WQ80P1R1Un0J/#
I checked your demo, it works.
Edit
The responsive code is missing in the ScaleSlider
function
jssor_mostsold_slider_init = function() {
var jssor_1_options = {
$AutoPlay: 0,
$SlideWidth: 200,
$SlideSpacing: 5,
$Loop: 0,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$Steps: 3
}
};
var jssor_1_slider = new $JssorSlider$("jssor-mostsold-slider", jssor_1_options);
/*#region responsive code begin*/
var MAX_WIDTH = 2000;
function ScaleSlider() {
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
};
See ScaleSlider
exmaple below,
function ScaleSlider() {
var containerElement = jssor_1_slider.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
if (containerWidth) {
var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
jssor_1_slider.$ScaleWidth(expectedWidth);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}