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>