bxslider 썸네일 이미지 로드 오류 좀 봐주세요ㅠㅠ
관련링크
본문
큰 이미지랑 썸네일 이미지랑 싱크가 안맞아요ㅜㅜ
마지막 이미지가 로드되있네요ㅠㅠㅠ왜그런걸까요...
계속 새로고침하면 싱크맞게 출력되고 ...
왜이런거죠ㅠㅠ
http://hanheesong93.dothome.co.kr/test1/index.html
<style>
.bx-wrapper {
position: relative;
margin-bottom: 30px;
padding: 0;
*zoom: 1;
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.bx-wrapper img {
max-width: 100%;
width: 100%;
display: block;
max-height: 551px;
}
.bx-wrapper .bx-pager a {
border: solid #fff 1px;
display: block;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: none;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
border: 1px solid #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
vertical-align: bottom;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-controls-direction a {
display: none;
}
.bx-wrapper .bx-pager a:hover,
.bx-wrapper .bx-pager a.active {
border: solid #e17d3a 1px;
}
.bx-wrapper {
}
.bx-wrapper {height: 570px;}
.bx-pager-item {width: 162.98px; height: 105px;}
</style>
<ul class="bxslider">
<li><img src="/img/ulsan/introduction/hospital/o/01.jpg" /></li>
<li><img src="/img/ulsan/introduction/hospital/o/02.jpg" /></li>
<li><img src="/img/ulsan/introduction/hospital/o/03.jpg" /></li>
<li><img src="/img/ulsan/introduction/hospital/o/04.jpg" /></li>
<li><img src="/img/ulsan/introduction/hospital/o/05.jpg" /></li>
<li><img src="/img/ulsan/introduction/hospital/o/06.jpg" /></li>
</ul>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
buildPager: function(slideIndex){
switch(slideIndex){
case 0:
return '<img src="/img/ulsan/introduction/hospital/o/thumb_01.jpg">';
case 1:
return '<img src="/img/ulsan/introduction/hospital/o/thumb_02.jpg">';
case 2:
return '<img src="/img/ulsan/introduction/hospital/o/thumb_03.jpg">';
case 3:
return '<img src="/img/ulsan/introduction/hospital/o/thumb_04.jpg">';
case 4:
return '<img src="/img/ulsan/introduction/hospital/o/thumb_05.jpg">';
case 5:
return '<img src="/img/ulsan/introduction/hospital/o/thumb_06.jpg">';
}
}
});
});
</script>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
