width - 画像スライダーの幅はラッパーよりも広く、サイトの適切な幅に達したときにオーバーフローして中央に配置されません

Question

現在、WordPress サイトを構築していますが、スライダーに問題があります。

スライド画像の幅は 1200px ですが、サイトは 945px です。画像を常に中央に配置する必要があります。ブラウザが幅 1200 ピクセル以上に拡大されている場合は問題ありませんが、サイズを約 1100 ピクセル以下に縮小するとすぐに、スライダーの画像がページの左側からはみ出さず、ブラウザの左側の端にぶつかりません。もう中央に移動して右に押すと、画像の余分な部分がブラウザからあふれ出るはずですが、何らかの理由でそうではありません。

ページを下にスクロールしたときの画像は次のとおりです。書き込みは常に左側に、その下の画像のように残りの部分が並ぶ必要があります。どちらの側にも約 100 ピクセルありますが、右側に画像があります。フェードオフするので、幅 945px よりも先に移動する必要があります。

これが私の CSS とそのイージング スライダーの WordPress プラグインです。

section#slider-wrapper {
width:100%;
height:330px;
margin-bottom: 32px;
position: relative;
overflow: visible;
z-index: 1;
-webkit-box-shadow: 0px 0px 11px #eee;
   -moz-box-shadow: 0px 0px 11px #eee;
        box-shadow: 0px 0px 11px #eee;      
background: url(images/slider-bg.jpg) #fff center repeat;       
}



#slider-wrapper #slides {
z-index:100;
height:330px;
width: 1200px;
margin: 0 auto;
position: relative;
 }
 #slider-wrapper .slides_container {
width:100%;
overflow:hidden;
position:absolute;
 }
 #slider-wrapper .slides_container div.slide, #slider-wrapper .slides_container div.slide img {
width:100%;
height:330px;
display:block;
  }
  #slider-wrapper .slides_container div.slide img {
width:1200px;
height:330px;
display:block;
  }

HTMLは次のとおりです。

<section id="slider-wrapper">
<div id="slides">
        <div class="slides_container">
         <!-- Easing Slider -->
             <div class="lof-container" style="height:330px;padding-right:0px;padding-top:0px;padding-left:0px;padding-bottom:0px;">
             <div class="lof-slidecontent" id="lofslidecontent45" style="border:0px solid #ccc;width:1200px;height:330px;">
             <div class="preload" style="padding-top:1px\9;background:url(wp-content/plugins/easing-slider/images/indicator.gif) no-repeat center center #;">

       </div>
        <div class="lof-main-outer" style="background: #;width:1200px;height:330px;">
            <ul class="lof-main-wapper">
               <li><img src="wp-content/uploads/2012/08/slide_1.jpg" style="width:1200px;" alt="" /></li>       
               <li><img src="wp-content/uploads/2012/08/slide_2.jpg" style="width:1200px;" alt="" /></li>
           </ul>
         </div>
        </div>
      </div><!-- End of Easing Slider -->       
     </div>
</div>  
<div class="clear"></div>
  </section><!-- END OF SECTION#SLIDER-WRAPPER -->

オーバーフローを試してみましたが、最小幅が機能していないようです/

これは、私のブラウザでどのように機能するかの jFiddle バージョンです。赤い線がオーバーフローすることはありません。

http://jsfiddle.net/strohy85/8dQ96/