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