jQuery Slidertron Overflow

Question

내 웹 사이트 중 하나에서 슬라이드 쇼에 Slidertron lib을 사용하고 있습니다. 그러나 일부 해상도에 따라 보았을 때 현재 슬라이드에서 다음 슬라이드를 볼 수 있습니다.

CSS :

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

, 난 그냥에 두 경계를 추가 HTML

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

내 div의 구분을 참조하십시오.

Answer 1

CSS에서 .viewer & .reel 사이의 25 픽셀 차이가 있습니다!

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*/