AnythingSlider: Centre images even on low screen resolution

问题

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?

回答1:

I found the solution.

The HTML

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

The CSS

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

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

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

回答2:

Aximili - Thanks for that! Your solution worked for me, but I did have the following because I was getting an overlap of the next slide over top of part of the right side of the current slide, with a varying width depending on window size.

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

来源：https://stackoverflow.com/questions/17480370/anythingslider-centre-images-even-on-low-screen-resolution