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

Question

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

以前有人问过这个问题，但没有解决方案。有没有人有解决方案？

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;}