예제로 만들어진 스크롤박스를 따와서 저의 포트폴리오 사이트에 넣었거든요
버튼을 만들어 backwrad forward로 스크립트도 넣어서.. 이미지가 앞뒤로 가게끔 되야되는데
예제는 잘되는데 사이즈 좀 변형해서 포트폴리오 사이트에 붙이니까 움직이질 않더라구요 ㅠㅠ
가만히 냅두면 그냥 자동으로 움직이는 것만 되고... 아무리해도 안되서 ....
혹시 능력자분 계시면... 알려주실수있나요...?
----------------------------------------------------------------------------------------------------------------------
여기는 예제입니당...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollbox-2.js"></script>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/scrollBox-2.css">
</head>
<body>
<div id="scrollbox" class="scroll-img">
<ul>
<li><img src="img/normal_01.png"></li>
<li><img src="img/normal_02.png"></li>
<li><img src="img/normal_03.png"></li>
<li><img src="img/normal_04.png"></li>
<li><img src="img/normal_05.png"></li>
<li><img src="img/normal_06.png"></li>
<li><img src="img/normal_07.png"></li>
<li><img src="img/normal_08.png"></li>
<li><img src="img/normal_09.png"></li>
<li><img src="img/normal_10.png"></li>
<li><img src="img/normal_11.png"></li>
<li><img src="img/normal_12.png"></li>
<li><img src="img/normal_13.png"></li>
<li><img src="img/normal_14.png"></li>
<li><img src="img/normal_15.png"></li>
</ul>
</div><!--scrollBox-->
<div id="scrollbox-btn" class="text-center">
<button class="btn" id="scrollbox-backward">◀</button><span class="space"></span><button class="btn" id="scrollbox-forward">▶</button>
</div><!--scrollBox-btn-->
<script type="text/javascript">
$(function(){
$('#scrollbox').scrollbox({
direction: 'h' ,
direction: 134 // 그림 크기 + 여백값 (ex:124+10=134)
});
$("#scrollbox-backward").click(function(){
$("#scrollbox").trigger("backward");
})
$("#scrollbox-forward").click(function(){
$("#scrollbox").trigger("forward");
})
})
</script>
</body>
</html>
------예제 css입니다--------
.scroll-img {
border: 1px solid red;
width: 935px;
height: 190px;
overflow: hidden;
margin-left:30px;
}
.scroll-img ul {
width: 900px;
height: 600px;
margin: 0;
}
.scroll-img ul li {
display: inline-block;
margin: 10px 0 10px 10px;
}
.scroll-img ul li img {
width:170px;
}
#scrollbox.scroll-img ul {
width: 1800px;
}
#scrollbox-btn {
width: 1000px;
padding-top: 10px;
margin-top:-120px;
}
#scrollbox-btn .space {
width:960px;
display:inline-block;
}
외부펌금지
글쓰기