JQuery 사이클 슬라이드 오버랩

Question

JQuery를 사용하여 사용자 정의 그림 슬라이드 쇼를 만들 때 그림이 정의 된 영역/div 외부에 표시됩니다. div 태그의 현재 그림을 div 태그에서 아래로 슬라이드하고 오른쪽에서 밀어 넣기를 원합니다. div 태그 내부에서 모든 작업을 수행하기를 원합니다. malsup.com (http://jquery.malsup.com/cycle/adv.html)의 "s4"예제와 같습니다. html로의

헤드 부분 : 나는 문제를 보여주기 위해이 예제를 만들었

<script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script> 

    <script type="text/javascript"> 
     $('.slideshow01').cycle({ 
      fx: 'custom', 
      sync: 0, 
      cssBefore: { 
       top: 0, 
       left: 250, 
       display: 'block' 
      }, 
      animIn: { 
       left: 0 
      }, 
      animOut: { 
       top: 188 
      }, 
      delay: -1000, 
      pause: 1 
     }); 
    </script> 

바디 부분의 HTML :

<div style="width:250px; height:188px; border:solid 10px #ffffff; "> 
     <div class="slideshow01"> 
      <img src="img/001.gif" /> 
      <img src="img/002.gif" /> 
      <img src="img/003.gif" /> 
      <img src="img/004.gif" /> 
      <img src="img/005.gif" /> 
      <img src="img/006.gif" /> 
      <img src="img/007.gif" /> 
     </div> 
    </div> 

Answer 1

당신은 수 오버 플로우를 설정해야 상위 요소에 숨겨져 있습니다. 예 :

<div style="width:250px; height:188px; border:solid 10px #ffffff; overflow: hidden"> 

인라인 스타일을 사용하거나 실천하지 최고에, 외부 스타일 시트 : 물론