任何滑块：即使在低屏幕分辨率下也能居中图像答案

【问题标题】：AnythingSlider: Centre images even on low screen resolution任何滑块：即使在低屏幕分辨率下也能居中图像
【发布时间】：2013-07-05 02:43:55
【问题描述】：

有没有人遇到过任何关于 AnySlider 的问题：
当您有长图像时，例如。 1920 像素宽，但您在小屏幕分辨率（例如 1280x960）上查看它，图像左对齐，而不是居中。

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

【问题讨论】：

标签： javascript anythingslider

【解决方案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% 宽的，但我认为它也应该适用于其他宽度。

【讨论】：

【解决方案2】：

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

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

【讨论】：