javascriptanythingslider

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?

Solution

  • 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.