How to set a border in jssor slider

Question

Hai I am using jssor thumbnail slider.I want to add a border to it. Normally it is a responsive slider but if we add additional styles it will become non responsive.I am add a border : 10px solid #ccc; in slider container, after that the slider right side partially cut off .Its perfectly work in desktop but not in mobile .How can i add a border to jssor slider?any one please help me.

Answer 1

Place jssor slider in a wrapper as follows,

<div style="margin: 0 auto; width: 100%; max-width: 980px;">
    <div style="border: 10px solid #ccc;">
    <!-- place jssor slider here -->
    </div>
</div>

And use following code to scale slider,

function ScaleSlider() {
    var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
    if (parentWidth)
        jssor_slider1.$ScaleWidth(parentWidth);
    else
        window.setTimeout(ScaleSlider, 30);
}

ScaleSlider();

$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);

See slider with border demo