이미지 슬라이드 질문입니다.
본문
아직 부족한 단계라 sir에서 많은 분들께 도움을 받고 있습니다. 감사합니다.
한가지 더 질문하고자 합니다.
현재 홈페이지는 아래와 같은 구조로 되어 있습니다.
이미지 슬라이드 4장이 pager에 따라서 돌아가며 컨텐츠 부분은 고정입니다.
<script type="text/javascript">
$(document).ready(function(){
var opts = $("#visual").cycle({
fx:'fade',
delay:-10000,
pager:"#visual_page",
onPagerEvent: function() {
opts.timeout = 0
}
}).data('cycle.opts');
});
</script>
<div id="woo">
<div id="main_section">
<!-- 이미지 슬라이드 부분입니다. -->
<div id="visual">
<a href="#"><img src="woo1.png"></a>
<a href="#"><img src="woo2.png"></a>
<a href="#"><img src="woo3.png"></a>
<a href="#"><img src="woo4.png"></a>
</div>
<!-- Pager 부분입니다. -->
<div id="visual_page"></div>
<!-- 콘텐츠 부분입니다. -->
<ul id="gup_list">
<li>
<a href="#" class="list_title"><img src="1.png"></a>
</li>
<li>
<a href="#" class="list_title"><img src="2.png"></a>
</li>
<li>
<a href="#" class="list_title"><img src="3.png"></a>
</li>
<li>
<a href="#" class="list_title"><img src="4.png"></a>
</li>
</ul>
</div>
</div>
여기서 고정이었던 컨텐츠 부분도 4가지로 내용을 추가하여 pager에 따라 변경하고자 합니다.
그림과 같이 가운데 pager에 따라 똑같이 아래위 슬라이드가 작동하는 형식입니다.
다양한 시도들을 해보고 있는데 아직 초보인지라 어려워 여기에 도움을 요청해봅니다.
조언 부탁드립니다.
답변을 작성하시기 전에 로그인 해주세요.
