0
私が使用しているカルーセルプラグインは正しく動作していません。通常は、すべてが正しく表示される前にブラウザのサイズを変更する必要があります。これは私がモバイルアプリであるため実用的ではありません。ポジション：絶対に私のカルーセルに不具合が発生する
私は、問題を位置決めに釘付けにしました。ページ間の遷移には、絶対配置が必要です（#page > div参照）。しかし、カルーセルには相対配置が必要です。
カルーセルの周りに余分に<div></div>を追加して、それを相対的な位置に配置しようとしましたが、そのトリックは行っていません。誰でもこの問題を解決する方法を知っている...
Transition.css：
#page {
position: relative;
}
#page > div {
display:none;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#page > div.current {
display: block;
}
HTML：
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="css/transition.css?v=1">
<link rel="stylesheet" href="css/elastislide.css?v=1">
</head>
<body>
<div id="page">
<div id="pageLogin" class="pageLogin current">
<a href="#pageSearch" id="signIn" class="button small brown"><span>Sign in</span></a>
</div>
<div id="pageSearch" class="pageSearch">
<!-- Elastislide Carousel -->
<div id="carousel" class="es-carousel-wrapper">
<div class="es-carousel">
<ul>
<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
</ul>
</div>
</div>
<!-- End Elastislide Carousel -->
</div> <!--! end #pageSearch-->
</div><!--end #Page-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
</body>
</html>