Is it possible to have a slider width JSSOR with a fixed height?

Question

I am trying to use the JSSOR slider on a website. I already figured out how to make it full width, but now it all "reacts", so it even scales the height of the slide. I would like to have a fixed height (400 pixels) and 100% width. I almost reached this, so "slider1_container" has a full width and height of 400 pixels, but the contents of this file are still sensitive.

There website: http://carwash-horovice.cz

I appreciate any help you can give me.

Answer 1

To scale the jssor slider, it will always maintain aspect ratio. You cannot scale without scaling.

If you want to keep the original height, you can disable scaling by deleting 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, in order for your page to react and maintain the auto-center of the slider, you can wrap the slider with 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> 

Answer 2

You have an example with a slider in full screen.

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

This is what I am looking for, but with a limited height. I do not want the aspect ratio of the images to change, but, like in the full-screen version, I would like it to expand to fill the width, and just crop what does not correspond to a fixed height. Is it possible?

Answer 3

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