Глидер

DEMO

HTML

<div id="glider">
   <div class="glider_frame">
      <div class="glider_10000">
           <div class="glider_item section" id="section1">
                <a style="background:url('{image_path}') 0% 0% no-repeat;"  href="{link}"> </a>
           </div>
           <div class="glider_item section" id="section2">
                 <a style="background:url('{image_path}') 0% 0% no-repeat;"  href="{link}"> </a>
            </div>
           <div class="glider_item section" id="section3">
                <a style="background:url('{image_path}') 0% 0% no-repeat;"  href="{link}"> </a>
            </div>
<div class="clear"></div>
       </div>
    </div>
<div class="glider_controls_container">
  <div class="glider_controls">
         <span class="active" id="#section1"></span>
         <span id="#section2" class=""></span>
         <span id="#section3" class=""></span>
  </div>
        <div class="clear"></div>
</div>
<div class="glider_nav">
   <div onclick="glider.next(); return false;" class="glider_next">►</div>
   <div onclick="glider.previous(); return false;" class="glider_pre"> ◄</div>
        <div class="clear"></div>
</div>
</div>
<script type="text/javascript">
var glider = new Glider('glider', {duration:0.5, frequency: 5}); glider.start();
</script>

CSS

div.glider_frame {overflow: hidden;}
div.glider_frame div.glider_item {overflow:hidden; float:left; background:#ccc;}
div.glider_frame .glider_image {height:230px; cursor: pointer;}
#glider, .glider_item {width: 628px !important;}

.section1_bg {background: #ffcc33 !important;}
.section2_bg {background: #99cc00 !important;}
.section3_bg {background: #3399ff !important;}

div.glider_frame div.glider_10000 { width: 10000px;}

.glider_nav {
left: 522px; 
position: relative; 
top: -66px; 
width: 90px; 
z-index: 1000;
}
.glider_next, .glider_pre {
      background: #000;
      font-size: 13px;
      text-align: center;
      color: #fff;
      cursor: pointer;
      position: relative;
      float: right; height: 21px; width: 21px;
      line-height: 21px;
      margin-left: 10px;
}

.glider_controls_container {
position: relative; 
top: -45px; 
left: 26px; 
bottom: -20px;
}
.glider_controls span {
float: left; 
display: block; 
width: 20px; 
height: 20px; 
margin-right: 5px; 
background: gray;  
cursor:pointer;
}
.glider_controls span.active {background: #fff;}