Jssor slider 100% width

Reignbeaux picture Reignbeaux · Feb 3, 2014 · Viewed 32k times · Source

I try to get a jssor slider working with 100% width (the container has a width of 70%). The problem is, that jssor only works with pixels, so if I use a slide_container with a width of 100%, the slider doesn't work any more. Is there any trick how to get this working?

Answer

jssor picture jssor · Feb 4, 2014

size of 'slide_container' should be always specified with fixed pixels. the original size is fixed then, but you can scale the slider to any size.

use following code to scale the slider to width of document.body.

var jssor_slider1 = new $JssorSlider$("slider1_container", options);

//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
    var bodyWidth = document.body.clientWidth;
    if (bodyWidth)
        jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
    else
        window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();

$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end

also, you can scale the slider to width of parent element,

var jssor_slider1 = new $JssorSlider$("slider1_container", options);

//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, 1920));
    else
        window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();

$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end