Help with reponsive sizing


#1

The slider script I’m using works successfully, but the images seem too wide in mobile view.
I believe width: 1000px needs to be replaced, but with what? I’ve tried 100% and auto. Any help will be appreciated.

<div id="slider1_container" style="position: relative; top: 0px; left: 1px; width:100%; height: 450px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width:1000px; height: 450px;">
 <div><img u="image" src="images/img1.png" /></div>
<div><img u="image" src="images/img2.png" /></div>
<div><img u="image" src="images/img3.png" /></div>
</div>
</div>

and the js code looks like this (in part):

          var jssor_slider1 = new $JssorSlider$('slider1_container', options);
          //responsive code begin
          function ScaleSlider() {
          var parentWidth = $('#slider1_container').parent().width();
          if (parentWidth) {
          jssor_slider1.$ScaleWidth(parentWidth);
          }

#2

Hi,

Unless you can provide a working demo it will be almost impossible to debug as we need the full html, css and JS.

I had a quick look online and it seems you are using this slider so you may need to compare your code with a working example. Note that the js in the example is what changes the width of the image container so you need to ensure you have added all the code correctly.

Can you set up a codepen of the slider only so we can see what you have done so far?