Jssor slider 100% width

Question

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 1

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

Answer 2

jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));

This still limit slider to just 1920 pix wide, maximum. So at my big screen slider was not covering 100% wide. So you may need to change that 1920 to something bigger number. I did with 19200 (one zero at the end fixed all). Once I adjusted that value it now strech all the width of my screen too.

Answer 3

Using Bootstrap, if you have Jssor inside an X column div, e.g., col-lg-12:

jssor_slider1.$ScaleWidth(
   Math.max(
      Math.min
       (parseInt($(".col-lg 12").css("width").replace("px", "")) -  
       (parseInt($(".col-lg-12").css("padding-left").replace("px", "")) + 
       parseInt($(".col-lg-12").css("padding-right").replace("px","")))),100));

Answer 4

As someone noticed, there is a problem when the slider's width is lesser than its parent's width. Chrome uses the maximum size of the slider, Firefox uses the parent instead. I have found a better code, so the slider will stretch to full width. You can modify it slightly to use the parent width or the window width.

How can I make JSSOR change its aspect ratio?

Answer 5

For anyone who comes looking for $ResizeCanvas. They've finally added a function that can help get the required slider size with $ScaleSize. Thanks jssor

For the latest version 25.2.0, we added a new method $ScaleSize(width, height) instead of $ResizeCanvas.

(this was first posted here)