5

I'm trying to use JSSOR slider on a website. I already figured out how to make it full width but now it's all "responsive" so it scales even the height of the slide. I would like to have fixed height (400px) and 100% width. I almost achieved it so the "slider1_container" is full width and 400px height but the content of it is still responsive.

There's the website: http://carwash-horovice.cz

I appreciate any help you can give me.

Jakub Štych
  • 53
  • 1
  • 3

3 Answers3

1

To scale jssor slider, it will always keep aspect ratio. You cannot scale with without scaling height.

If you want to keep the original height, you can disable scaling by removing the following code.

    function ScaleSlider() {
        var parentWidth = $('#slider1_container').parent().width();
        if (parentWidth) {
            jssor_slider1.$ScaleWidth(parentWidth);
        }

        else
            $JssorUtils$.$Delay(ScaleSlider, 30);
    }

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

In addition, to keep your page responsive and keep the slider auto center, you can wrap the slider by a wrapper.

<div style="position: relative; width: 100%; overflow: hidden;">
    <div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">

        <!-- use 'margin: 0 auto;' to auto center element in parent container -->
        <div id="slider1_container" style="...margin: 0 auto;..." ...>
        </div>

    </div>
</div>
jssor
  • 6,995
  • 2
  • 18
  • 21
0

You have an example with the slider at full screen.

http://www.jssor.com/testcase/full-screen-slider.source.html

This is what I'm looking for, but with a limited height. I don't want the aspect ratio of the images to change, but as in the full-screen version, I'd like it to expand to fill the width, and simply crop what doesn't fit within the fixed height. Is this possible?

user1472100
  • 19
  • 3
  • 1
    You can wrap a full width slider with a wrapper
    – jssor Sep 15 '14 at 20:53
  • Well, that definitely did keep the height from expanding past the 400px I specified, but the contents of the slider, aside from the image, also get cropped. I suspect it simply can't be done. Thanks for the help, though. – user1472100 Sep 15 '14 at 21:13
0

You can fix the height of the carousel by commenting out $(window).bind("resize", ScaleSlider);

Peter Lock
  • 11
  • 3