레이아웃에 이미지 슬라이딩 기능 추가하기

<!--@if($layout_info->view_image_1)-->
  <!--%import("./js/paging.js")-->
  <div class="main_banner png_bg">
   <div class="main_view">
    <div class="viewer"> 
     <div class="image_reel">
      <ul> 
       <li><a href="<!--@if($layout_info->view_url_1)-->{$layout_info->view_url_1}<!--@else-->#<!--@end-->"><img src="{$layout_info->view_image_1}" width="750" height="290" alt="{$layout_info->view_title_1}" title="{$layout_info->view_title_1}" /></a></li>
       <!--@if($layout_info->view_image_2)-->
       <li><a href="<!--@if($layout_info->view_url_2)-->{$layout_info->view_url_2}<!--@else-->#<!--@end-->"><img src="{$layout_info->view_image_2}" width="750" height="290" alt="{$layout_info->view_title_2}" title="{$layout_info->view_title_2}" /></a></li>
         <!--@end-->
       <!--@if($layout_info->view_image_3)-->
       <li><a href="<!--@if($layout_info->view_url_3)-->{$layout_info->view_url_3}<!--@else-->#<!--@end-->"><img src="{$layout_info->view_image_3}" width="750" height="290" alt="{$layout_info->view_title_3}" title="{$layout_info->view_title_3}" /></a></li>
         <!--@end-->
         <!--@if($layout_info->view_image_4)-->
       <li><a href="<!--@if($layout_info->view_url_4)-->{$layout_info->view_url_4}<!--@else-->#<!--@end-->"><img src="{$layout_info->view_image_4}" width="750" height="290" alt="{$layout_info->view_title_4}" title="{$layout_info->view_title_4}" /></a></li>
         <!--@end-->
      </ul>
     </div>
    </div>
    <div class="paging">
     <div class="png_bg">
       <!--@if($layout_info->view_title_1)-->
      <a href="#" rel="1"><span>{$layout_info->view_title_1}</span></a>
       <!--@end-->
       <!--@if($layout_info->view_title_2)-->
      <a href="#" rel="2"><span>{$layout_info->view_title_2}</span></a>
       <!--@end-->
       <!--@if($layout_info->view_title_3)-->
      <a href="#" rel="3"><span>{$layout_info->view_title_3}</span></a>
       <!--@end-->
       <!--@if($layout_info->view_title_4)-->
      <a href="#" rel="4"><span>{$layout_info->view_title_4}</span></a>
       <!--@end-->
     </div>
    </div>
   </div>
  </div>
  <!--@end-->

         <var name="view_image_1" type="image">
            <title xml:lang="ko">본문 상단 이미지 슬라이드의 이미지1 </title>
            <description xml:lang="ko"><strong>레이아웃에서 슬라이드가 필요없는 분은 이 부분을 입력하지 않으시면 나타나지 않습니다.</strong><br /> 이미지를 입력해 주세요. 높이:300 X 넓이:950</description>
        </var>
        <var name="view_title_1" type="text">
            <title xml:lang="ko">이미지1 상단 제목</title>
            <description xml:lang="ko">이미지1 제목 글자를 입력해주세요.</description>
        </var>
        <var name="view_url_1" type="text">
            <title xml:lang="ko">이미지1이 지정 링크</title>
            <description xml:lang="ko">링크가 없다면 입력하지 않으셔도 됩니다.</description>
        </var>
        <var name="view_image_2" type="image">
            <title xml:lang="ko">본문 상단 이미지 슬라이드의 이미지2</title>
            <description xml:lang="ko">이미지를 입력해 주세요. 높이:300 X 넓이:950</description>
        </var>
        <var name="view_title_2" type="text">
            <title xml:lang="ko">이미지2 상단 제목</title>
            <description xml:lang="ko">이미지2 제목 글자를 입력해주세요.</description>
        </var>
        <var name="view_url_2" type="text">
            <title xml:lang="ko">이미지2이 지정 링크</title>
            <description xml:lang="ko">링크가 없다면 입력하지 않으셔도 됩니다.</description>
        </var>
  <var name="view_image_3" type="image">
            <title xml:lang="ko">본문 상단 이미지 슬라이드의 이미지3</title>
            <description xml:lang="ko">이미지를 입력해 주세요. 높이:300 X 넓이:950</description>
        </var>
        <var name="view_title_3" type="text">
            <title xml:lang="ko">이미지3 상단 제목</title>
            <description xml:lang="ko">이미지3 제목 글자를 입력해주세요.</description>
        </var>
        <var name="view_url_3" type="text">
            <title xml:lang="ko">이미지3이 지정 링크</title>
            <description xml:lang="ko">링크가 없다면 입력하지 않으셔도 됩니다.</description>
        </var>
  <var name="view_image_4" type="image">
            <title xml:lang="ko">본문 상단 이미지 슬라이드의 이미지4</title>
            <description xml:lang="ko">이미지를 입력해 주세요. 높이:300 X 넓이:950</description>
        </var>
        <var name="view_title_4" type="text">
            <title xml:lang="ko">이미지4 상단 제목</title>
            <description xml:lang="ko">이미지4 제목 글자를 입력해주세요.</description>
        </var>
        <var name="view_url_4" type="text">
            <title xml:lang="ko">이미지4이 지정 링크</title>
            <description xml:lang="ko">링크가 없다면 입력하지 않으셔도 됩니다.</description>
        </var>

 /*--Main Slide--*/
.main_banner{height:300px; background:url(../img/BgSlide.png) no-repeat left top; padding:5px; *zoom:1; margin-top:30px;}
.main_view {position:relative; height:300px; width:950px;}
.main_view:after{content:""; display:block; clear:both;}
.main_view li{float:left; list-style:none;}
.main_view .paging li{float:none;}
.viewer {height:300px; width:950px; overflow:hidden; position:relative;}
.image_reel {position:absolute; top:0; left:0;}
.image_reel img {float:left;height:300px; width:950px;}
.paging {position:absolute; left:0; bottom:0; z-index:100; display:inline-block; width:950px; height:35px; *zoom:1;}
.paging div{ background:url(../img/BgPaging.png) no-repeat left top; height:35px;}
.paging a {text-decoration:none; display:inline-block; padding: 0 20px; height:35px; line-height:35px;}
.paging a span{display:inline-block; cursor:pointer; color:#333;}
.paging a.active{background:url(../img/BgPagingActive.gif) no-repeat 13px 14px; *background-position:13px 13px}