CoDropsの垂直アコーディオンを使用しています。私が抱えている問題は、javascriptにリストしたvisibleSlicesの数よりも多くの画像スライスを追加すると、overflow：hidden（私のcssにリストされている）にないことです。余分な画像スライスは最後の下に配置されます画像スライスとページが長くなるだけです（非表示のオーバーフローが機能していないためだと思います）。さらに、ユーザーがクリックして次の（非表示の）画像スライスにスクロールできるように見える矢印があるはずです。これらは画面に表示されますが、クリックした場合、または画像スライスのセットの最後の画像を表示して次の矢印（最後の画像であることがわからない）をクリックした場合はスクロールせず、すべての画像とテキストが消えて、ページを更新しない限り自動的に修正されない空白の白いページが残ります。
どんな助けでも大歓迎です！ありがとう！
アコーディオンのJavaScriptは次のようになります。
<script type="text/javascript">
$(function() {
$('#va-accordion').vaccordion({
accordianW: $(window).width(1000),
accordianH: $(window).height(450),
expandedHeight: 450,
visibleSlices: 8,
animOpacity: .2,
});
});
</script>
垂直アコーディオンのCSSは次のようになります:(多くの画像スライスのうち1つだけを表示しています）
.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;
}
（これが私のスクロールボタン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のJavaScriptは次のようになります:(デモページにリストされているオプションは使用しませんが、アコーディオンは想定どおりの動作をします）。
<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;
}