Глидер 2

DEMO

HTML

<div id="glider">
   <div class="glider_frame">
      <div class="glider_10000">
          <div class="glider_item section" id="section1">
            <div><a style="background:url('{image_path}') 0% 0% no-repeat;"  href="{link}"> </a></div> 
            </div>
          </div>
          <div class="glider_item section" id="section2">
            <div><a style="background:url('{image_path}') 0% 0% no-repeat;"  href="{link}"> </a></div> 
            </div>
          </div>
          <div class="glider_item section" id="section3">
            <div><a style="background:url('{image_path}') 0% 0% no-repeat;"  href="{link}"> </a></div> 
            </div>
          </div>
                   <div class="clear"></div>
      </div>
   </div>
<div class="glider_controls_container">
    <div class="glider_controls">
         <span class="active" id="#section1">Заголовок 1</span>
        <span id="#section2">Заголовок 2</span>
        <span id="#section3">Заголовок 3</span>
    </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;}
.glider_image {cursor: pointer; z-index: 10000;}
div.glider_frame div.glider_10000 {width: 10000px;}
#glider, .glider_item, div.glider_frame div.glider_item, .glider_image {width: 628px !important; height: 230px;}

.glider_title {
background:#eee; 
height:80px; 
position: relative; 
left: 130px; 
top: 144px; 
width: 490px;
}
.glider_title div {padding: 10px;}
.glider_title h2 {margin-top: 10px;}

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

.glider_controls_container { 
position: relative; 
top: -224px; 
left: 7px; 
width: 115px;
}
.glider_controls span {
display: block; 
width: 115px; 
height: 66px; 
margin-right: 5px; 
margin-bottom: 10px; 
background: gray;  
cursor:pointer;
}
.glider_controls span.active {background: #fff;}