수직 아코디언 오버 플로우 및 스크롤 문제

Question

CoDrops의 수직 아코디언을 사용하고 있습니다. 내가 겪고있는 문제는 자바 스크립트에 나열된 visibleSlices 수보다 많은 이미지 조각을 추가 할 때마다 오버플로가 아닙니다 (내 CSS에 나열된대로). 추가 이미지 슬라이스가 마지막 이미지 슬라이스와 페이지가 단순히 길어집니다 (오버 플로우 숨김이 작동하지 않기 때문에 생각합니다.) 또한 사용자가 클릭하여 다음 (숨겨진) 이미지 슬라이스로 스크롤 할 수있는 화살표가 있어야합니다. 화면에 나타나지 만 클릭하지 않거나 이미지 조각 세트의 마지막 이미지를보고 다음 화살표 (마지막 이미지임을 알지 못함)를 클릭 한 다음 모든 이미지와 페이지를 새로 고침하지 않으면 텍스트 자체가 고쳐지지 않는 빈 페이지가 사라집니다.

도움이 될 것입니다. 감사!

아코디언에 대한 나의 자바 스크립트는 다음과 같습니다

수직 아코디언에 대한 나의 CSS는 다음과 같습니다

<script type="text/javascript"> 
     $(function() { 
      $('#va-accordion').vaccordion({ 
       accordianW: $(window).width(1000), 
       accordianH: $(window).height(450), 
       expandedHeight: 450, 
       visibleSlices: 8, 
       animOpacity: .2, 
      }); 
     }); 
     </script> 

: 여기 내있어 (

.va-container{ 
position:relative; 
top:50px; 
margin:0px auto 0 auto; 
} 
.va-wrapper{ 
width:100%; 
height:100%; 
position:relative; 
overflow:hidden; 
background:#FFF; 
} 
.va-slice{ 
cursor:pointer; 
position:absolute; 
width:100%; 
left:100px; 
overflow:hidden; 
} 
.va-slice-1{ 
background:#FFF url(../images/testa.jpg) no-repeat center center; 
} 

(단지 많은 중 1 개 이미지 슬라이스를 표시) 스크롤 버튼 CSS :

.va-nav span{ 
width:40px; 
height:25px; 
background:transparent url(../images/prev.png) no-repeat center center; 
position:absolute; 
top:-35px; 
left:50%; 
margin-left:-20px; 
text-indent:-9000px; 
opacity:0.5; 
cursor:pointer; 
display:none; 
z-index:100; 
} 
.va-nav span.va-nav-next{ 
background-image:url(../images/next.png); 
top:auto; 
bottom:-35px; 
} 
.va-nav span:hover{ 
opacity:1.0; 
} 

CoDrop의 자바 스크립트는 다음과 같이 보입니다. E 옵션은 데모 페이지에 나와 있지만, 자신의 아코디언이 어떻게해야 무엇 않습니다)

<script type="text/javascript"> 
     $(function() { 
      $('#va-accordion').vaccordion(); 
     }); 
    </script> 

CoDrop의 CSS는 다음과 같습니다.

.va-container{ 
position:relative; 
margin:40px auto 0 auto; 
} 
.va-wrapper{ 
width:100%; 
height:100%; 
position:relative; 
overflow:hidden; 
background:#000; 
} 
.va-slice{ 
cursor:pointer; 
position:absolute; 
width:100%; 
left:0px; 
overflow:hidden; 
} 
.va-slice-1{ 
background:#000 url(../images/1.jpg) no-repeat center center; 
} 

CoDrop의 스크롤 버튼 CSS :

.va-nav span{ 
width:40px; 
height:25px; 
background:transparent url(../images/prev.png) no-repeat center center; 
position:absolute; 
top:-35px; 
left:50%; 
margin-left:-20px; 
text-indent:-9000px; 
opacity:0.7; 
cursor:pointer; 
display:none; 
z-index:100; 
} 
.va-nav span.va-nav-next{ 
background-image:url(../images/next.png); 
top:auto; 
bottom:-35px; 
} 
.va-nav span:hover{ 
opacity:1.0; 
} 

Answer 1

왜 오버 플로우가 발생하지 않았습니까? .va- 컨테이너에서 {}?