Question

AnythingSlider有没有人遇到过这个问题：
当你有一个很长的图像，例如。 1920px宽，但您在小屏幕分辨率（例如1280x960）上观看，图像左对齐，而不是居中。

这个问题已经asked before但没有解决方案。有没有人有解决方案？

Answer 1

我找到了解决方案。

HTML

<ul id='slider'>
  <li><div><img ... /></div></li>
</ul>

CSS

#slider > li { position: relative; }
#slider > li > div { position: absolute; top: 0; width: 3200px !important; text-align: center; }

JavaScript

$(function () {
  $('#slider').anythingSlider();
  AdjustSliderImgWrapper();
});

$(window).resize(AdjustSliderImgWrapper);

function AdjustSliderImgWrapper() {
  var left = (parseInt($('#slider > li > div').width()) - $('#slider > li').innerWidth()) / -2;
  $('#slider > li > div').css('left', left);
}

我的滑块是100％宽，但我认为它也适用于其他宽度。

Answer 2

Aximili - 谢谢！你的解决方案对我有用，但我确实有以下内容，因为我在当前幻灯片右侧部分顶部的下一张幻灯片重叠，根据窗口大小改变宽度。

ul.anythingBase li.panel.activePage{z-index: 100 !important;}
ul.anythingBase li.panel {z-index:1;}

AnythingSlider：即使在低分辨率下也能居中显影

2 个答案: