jQuery Slidertron溢出

Question

我在我的一個網站上使用Slidertron lib進行幻燈片放映。然而，當我根據某些解決方案來看它時，我可以看到當前幻燈片中的下一張幻燈片，這不應該發生。

CSS：

#slider {margin-left:auto;margin-right:auto;width:100%;position:relative;} 
#slider .viewer {width:75%;height:400px;margin:0 auto;overflow:hidden;border:1px solid red;} 
#slider .viewer .reel {display:none;height: 375px;} 
#slider .slide {border:1px solid blue;} 
#slider .viewer .reel .slide {position: relative;width:1100px;height:375px;} 

HTML：

<div id="slider"> 
      <div class="indicator"> 
       <span>1</span> 
       <span>2</span> 
       <span>3</span> 
       <span>4</span> 
       <span>5</span> 
      </div> 
     <div class="viewer"> 
      <div class="reel"> 
       <div class="slide"> 
        <img class="title" src="/Content/1.png" alt="" /> 
        <p class="paragraph">Slide 1 text.</p> 
        <img class="image" src="/Content/2.png" alt="" /> 
       </div> 
       <div class="slide"> 
        <img class="title" src="/Content/Img1.png" alt="" /> 
        <p class="paragraph">Slide 2 text.</p> 
        <img class="image" src="/Content/Img2.png" alt="" /> 
       </div> 
      </div> 
     </div> 
    </div> 

的jQuery（的那種無關緊要的，因爲這是工作好）：

 $(function() { 
     $('#slider').slidertron({ 
      viewerSelector: '.viewer', 
      reelSelector: '.viewer .reel', 
      slidesSelector: '.viewer .reel .slide', 
      indicatorSelector: '.indicator span', 
      speed: 'slow', 
      navPreviousSelector: '.previous', 
      navNextSelector: '.next', 
      advanceDelay: 40000 
     }); 
    }); 

僅供參考，我添加了兩個邊界剛請參閱我的div的分隔。

Answer 1

在您的CSS中，您在.viewer & .reel之間有25px的差異！

對我來說，jquery.slidertron的最佳工作方式是當我嚴格地告訴他與css圖像大小。

/*slider*/ 
#slider { 
    margin: 0 auto; 
    position: relative; 
    width: 960px; 
    height: 300px; 
} 
#slider .viewer { 

    width: 960px; 
    height: 300px; 
    overflow: hidden; 
} 
#slider .viewer .reel { 

    display: none; 
    width: 960px; 
    height: 300px; 
} 
#slider .viewer .reel .slide { 

    position: relative; 
    width: 960px; 
    height: 300px; 
} 
/*slider*/