AnythingSlider:即使在低屏幕分辨率下也可以使图像居中 [英] AnythingSlider: Centre images even on low screen resolution

问题描述

有人用AnythingSlider遇到此问题:
当您的图像较长时(例如).宽1920像素，但是在较小的屏幕分辨率(例如1280x960)上查看时，图像保持对齐，而不是居中.

Has anyone had this problem with AnythingSlider:
When you have a long image eg. 1920px wide, but you view it on a small screen resolution (eg. 1280x960), the image is left aligned, instead of centered.

此问题已经问过，但没有解决方案.有人有解决方案吗?

This question has been asked before but no solution. Does anyone has the solution?

推荐答案

我找到了解决方案.

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

The 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％，但我认为它也应该适用于其他宽度.

My slider is 100% wide, but I think it should work for other width as well.

这篇关于AnythingSlider:即使在低屏幕分辨率下也可以使图像居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！