Lush Slider全宽和限制高度

Question

I believe I have tried about everything and am failing miserably. I have been working with the lush responsive slider and have been having some major issues.

To start off I took the exact code from the demo and placed it in my header, but it had a strange padding on the bottom and right side so I removed it and thought it was working fine except for the height. It's so large that it takes over more than half the page.

When I resized the window and reloaded the page though the background of the slider sat in the top left corner much smaller than it needed to be. So the responsiveness only works if you reload at 100% screen? That doesn't make any scenes.

Also, the height is bothering me. I cannot get it to resize at all and when I did put static heights on the ul and li of 10em it did resize, but then the responsiveness went out the window.

I tried to post this in a js fiddle, but the plugin was so much code that it crashed it without running anything. If it would help I can post a dev site with this on it. As I said I used the exact html and css from the demo files I only took away a bit of padding to make it full width.

Any help would be much appreciated.

Answer 1

Ok, I have managed to work out a solution for the width issue. The problem seems to relate to the initial baseWidth, which defaults to 1140 pixels. Playing around with the

data-base-width="600" and data-base-height="600" 

attributes in the first lush slider div tag may see you make some progress, but it looks like only fixed values are accepted, no percentages. I opted for this solution which seems to work, write the first div tag using document.write method and programmaticaly set the width the the clientWidth, as such :

<script>
document.write('<div id="lushDiv" class="lush-slider autoload shadow-a" data-slider-pause-on-hover="true" data-base-width="' + document.body.clientWidth + '" data-base-height="600" style="background: rgb(229, 229, 229)">');
</script>

Answer 2

My suggestion is not to use Javascript or JQuery. Some simple CSS and HTML will do.

Here is the fiddle: http://jsfiddle.net/jacobdubail/bKaxg/7/

You obviously don't need all of the CSS. Just change it to accompany your layout.

Change your width to percentages, like so:

min-width: 100%;

I would suggest changing the height to ems.