简体   繁体   English

jQuery Slider拉伸全宽高度

[英]jQuery Slider to stretch full Width Height

I am trying to implement Nerve slider where i want to stretch across the width of the browser and the height. 我正在尝试实现Nerve滑块,该位置要在浏览器的宽度和高度上延伸。 I have even specified a fixed width for the Div still the Plugin seems to re-size it. 我什至为Div指定了固定宽度,但插件似乎仍在调整其大小。

Any idea how i can force the height and the width to the full size of the temporary background image. 任何想法我如何可以强制高度和宽度为临时背景图像的完整大小。

http://play.mink7.com/sophiance/ http://play.mink7.com/sophiance/

.homeSlider {
    width: 100%;
    height: 990px;
    position: absolute;
}
.homeSlider > #slider {
    width: 100%;
    height: 990px !important;
    background-image:100%;
}

**Edit** **编辑**

Changing the Height and width to 100% did the job. 将高度和宽度更改为100%即可完成工作。 When i Resize the browser i get a white space in that section. 当我调整浏览器大小时,该部分出现空白。 Any way i can make the slider fit in that section but the height should not be resized. 我可以通过任何方式使滑块适合该部分,但高度不应调整大小。

This is the start of the default settings in the non-minified version of the plugin: 这是该插件非缩小版本中默认设置的开始:

$.fn.startslider = function (userOptions) {
    var options = $.extend({
        sliderWidth: "1200px",
        sliderHeight: "500px",

When you initialise the slider on your page, you need to override these values. 在页面上初始化滑块时,您需要覆盖这些值。

Edit: 编辑:

As mentioned by Michael, you can do: 正如迈克尔提到的,您可以执行以下操作:

    sliderWidth: $(window).width() +"px",
    sliderHeight: $(window).height()+"px"

There is an option when using the Nerve slider to set the slider to fullscreen. 使用“神经”滑块将滑块设置为全屏时,有一个选项。

$.fn.nerveSlider = function(userOptions) {
        var options = $.extend({
            sliderWidth: "1200px",
            sliderHeight: "500px",
            sliderHeightAdaptable: false,
            sliderFullscreen: false,

Just set this line to true: 只需将此行设置为true:

sliderFullscreen: true,

Should do the trick. 应该做到的。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM