jQuery Jssor Image Slider Width Issue

Question

I recently implemented the Jssor Image Slider which is responsive:

http://www.petcenters.com/Interior-Painting-Gallery

Here is the Demo: http://www.jssor.com/demos/image-gallery.html

I'm having a problem adjusting the width of this container.

I have tried to change the width attribute to 1340px in several places:

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 800px; height: 456px; background: #191919; overflow: hidden;">

<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 800px; height: 356px; overflow: hidden;">

I have also tried modifying within responsive JavaScript. This caused a problem with the ExtraSmall ViewPort:

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

I also found that some of the animation became off-centered.

This is probably a very easy question, but unfortunately I don't have enough experience with CSS.

Any help would be appreciated.

Answer 1

Please replace

jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));

with

jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 1340), 300));

It will scale the slider width to maximum 1340px and minimum 300px.