SonMan's IT BBS: 이미지 슬라이드를 쉽게 구현 할 수 있는 Easy Slider 의 페이지 위치 바꾸기.

2014년 10월 30일 목요일

이미지 슬라이드를 쉽게 구현 할 수 있는 Easy Slider 의 페이지 위치 바꾸기.

홈페이지를 만들다 보면 이미지 슬라이드(이미지가 주기적으로 반복되는 이미지 뷰)를 쓸경우가 많다.

기능 자체가 간단하면서도 많이 쓰이는 기능이다 보니, 워낙 많은 종류가 있는데,
요즘에 주로 사용하는 스크립트는 Easy Slider 이다.

스크립트 자체가 jQuery 기반으로 간략하게 짜여져 있어서, 쓰기도 간편하고, 문제가 발생할 일이 별로 없다.

http://cssglobe.com/easy-slider-17-numeric-navigation-jquery-slider/

여기서 배포하고 있으니, 필요하면 다운 받으면 된다.

아예 제목 부터가 "Easy" 인 만큼. 쓰는 법도 정말 간단하다.

그냥 "easySlider1.7.js" 파일을 인크루드 시킨다음.

<div id="slider">
 <ul>    
  <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
  <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
  <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
  <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
  <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>   
 </ul>
</div>
<script type="text/javascript">
 $(document).ready(function(){ 
  $("#slider").easySlider({
   auto: true, 
   continuous: true
  });
 }); 
</script>

... 만 해주면 된다.

문제는 숫자 페이지를 적용시켰을 땐데....