Question

对于使用Nivo Slider的人来说，是否有任何直接的方式（或不是）将图像置于滑块中心？我知道Nivo Slider的设计目的是显示完全“适合”盒子的图像（与我使用它的方式不同），但出于技术原因，我宁愿尝试将图像居中，而不是让我的所有图像完美适合Nivo盒子的宽度和高度。目前我的Nivo幻灯片看起来像这样：

http://dl.dropbox.com/u/12453703/nivo.png

对不起，我没有提供任何代码示例，让我试一试。我的CSS知识不是太大，我解决问题的大多数尝试都是在网上寻找解决方案（并尝试应用所述解决方案），或者在我的样式表中尝试随机单行以尝试修复问题。

如果你想知道我正在使用的CSS文件，我使用的默认主题可以在这里下载： http://cloud.github.com/downloads/gilbitron/Nivo-Slider/nivo-slider2.7.1.zip

谢谢，我很感激。

Answer 1

图片的位置正在javascript文件中加载。编辑“jquery.nivo.slider.js”（请确保在标题中使用此文件而不是“jquery.nivo.slider.pack.js”。）

转到第85行：

//Set first background
        slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');

找到上述行。将其更改为：

//Set first background
        slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat center');

现在您可以看到您的第一张图片位于中心。只需播放该文件，您就可以将整个图像放在中心位置。

修改找到此函数：//为切片动画添加切片。第253行。编辑其中的其他部分。第262行

background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'

通过将0％更改为50％，可使图像垂直居中。越来越近了......

修改

再次编辑上面的行并替换为下面的行。

background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat 50%'

这肯定会有效..

修改

忘掉以上所有编辑内容。只需用this one替换你的jquery.nivo.slider.js文件。

Answer 2

如果您需要制作水平居中的背景，并且希望所有过渡都能正常工作，则可以执行以下操作：

您需要知道当前图像的实际宽度
您需要计算应添加此图像的切片（或方框）的偏移量：

var mySliceOffset = (vars.currentImage.attr('width') - $('body').width()) / 2;

（在此示例中，滑块容器宽度设置为100％）

然后编辑背景属性：

background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((mySliceOffset+sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'

Answer 3

在div中创建一个包装器div和center nivoslider。

HTML：

<div id="wrap">
    <div id="slider" class="nivoSlider">
        <img src="images/slide.jpg" alt="" />
    </div>
</div>

的CSS：

#wrap { 
    position: relative;
    height: 500px; 
    width: 500px; 
}
#slider { 
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -125px; // Half the height
    margin-left: -125px; // Half the width
    height: 250px;
    width: 250px;
}

修改

编辑demo.html并添加一个额外的包装器，如下所示：

<div class="slider-wrapper theme-default"> <div class="ribbon"></div> <div id="slider-wrap">  <div id="slider" class="nivoSlider"> <img src="images/toystory.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="images/nemo.jpg" alt="" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div> </div> </div>

在演示文件中添加style.css内的内容：

#slider-wrap { position: absolute; top: 50%; left: 50%; margin-top: -123px; /* 246/2 */ margin-left: -309px;/ /* 618/2 */ } .slider-wrapper { position: relative; height: 500px; width: 1000px; background: red; }

找到这一行并评论保证金规则：

.theme-default #slider { /* margin:100px auto 0 auto; */ width:618px; /* Make sure your images are the same size */ height:246px; /* Make sure your images are the same size */ }

下载修改后的示例并调查代码http://www.mediafire.com/?9f7z9ku4n1ikiba

Answer 4

尝试使用此CSS。

.nivoSlider img {
    background-position:center center;
}

使用默认主题在Nivo Slider上居中图像？

4 个答案: