<div class="slider-wrap"> <div id="slider1" class="csw">    
<div class="panelContainer">    
<div class="panel" title="Первая панель">    
<div class="wrapper">    
<h3>Первая панель</h3>    
<p>Здесь будет текст Вашей первой панели.</p>    
<p><a href="#5" class="cross-link" title="К пятой панели">« Предыдущая</a> | <a href="#2" class="cross-link" title="Ко второй панели">Следующая »</a></p>   
</div>    
</div>    
<div class="panel" title="Вторая панель">    
<div class="wrapper">    
<h3>Вторая панель</h3>    
<p>Здесь будет текст Вашей второй панели.</p>    
<p><a href="#1" class="cross-link" title="К первой панели">« Предыдущая</a> | <a href="#3" class="cross-link" title="К третьей панели">Следующая »</a></p>    
</div>    
</div>    
<div class="panel" title="Третья панель">    
<div class="wrapper">    
<h3>Третья панель</h3>    
<p>Здесь будет текст Вашей третьей панели.</p>    
<p><a href="#2" class="cross-link" title="Ко второй панели">« Предыдущая</a> | <a href="#4" class="cross-link" title="К четвертой панели">Следующая »</a></p>    
</div>    
</div>    
<div class="panel" title="Четвертая панель">    
<div class="wrapper">    
<h3>Четвертая панель</h3>    
<p>Здесь будет текст Вашей четвертой панели.</p>    
<p><a href="#3" class="cross-link" title="К третьей панели">« Предыдущая</a> | <a href="#5" class="cross-link" title="К пятой панели">Следующая »</a></p>    
</div>    
</div>    
<div class="panel" title="Пятая панель">    
<div class="wrapper">    
<h3>Пятая панель</h3>    
<p>Здесь будет текст Вашей пятой панели.</p>    
<p><a href="#4" class="cross-link" title="К четвертой панели">« Предыдущая</a> | <a href="#1" class="cross-link" title="К первой панели">Следующая »</a></p>    
</div>    
</div>    
</div>    
</div>   
</div>

<style type="text/css">   
       
    * { margin: 0; padding: 0    
}    
    p { text-align: left; margin: 15px 0    
}    
    p, ul { font-size: 13px; line-height: 1.4em    
}    
    p a, li a { color: #39c; text-decoration: none    
}   
    p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100%    
}   
    p#cross-links { text-align: center   
}   
    p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px    
}   
    a:focus { outline:none    
}   
    img { border: 0    
}   
    h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left }   
    body {   
    font-family: Verdana, Arial;   
    background: #ebebeb url("images/body-bg.png") repeat-y center;   
    color: #000;   
    width: 800px;   
    margin: auto;   
    text-align: center;   
    padding-bottom: 20px;   
    }   
    .stripViewer .panelContainer .panel ul {   
    text-align: left;   
    margin: 0 15px 0 30px;   
    }   
    .slider-wrap {    
    margin: 20px 0;   
    position: relative;   
    width: 100%;   
    }   
    .csw {width: 100%; height: 460px; background: #fff; overflow: scroll}   
    .csw .loading {margin: 200px 0 300px 0; text-align: center}   
    .stripViewer {    
    position: relative;   
    overflow: hidden;    
    border: 5px solid #000;   
    margin: auto;   
    width: 700px;    
    height: 460px;   
    clear: both;   
    background: #fff;   
    }   
    .stripViewer .panelContainer {   
    position: relative;   
    left: 0; top: 0;   
    width: 100%;   
    list-style-type: none;   
    }   
    .stripViewer .panelContainer .panel {    
    float:left;   
    height: 100%;   
    position: relative;   
    width: 700px;    
    }   
    .stripViewer .panelContainer .panel .wrapper {    
    padding: 10px;   
    }   
    .stripNav {    
    margin: auto;   
    }   
    .stripNav ul {    
    list-style: none;   
    }   
    .stripNav ul li {   
    float: left;   
    margin-right: 2px;    
    }   
    .stripNav a {    
    font-size: 10px;   
    font-weight: bold;   
    text-align: center;   
    line-height: 32px;   
    background: #c6e3ff;   
    color: #fff;   
    text-decoration: none;   
    display: block;   
    padding: 0 15px;   
    }   
    .stripNav li.tab1 a { background: #60f }   
    .stripNav li.tab2 a { background: #60c }   
    .stripNav li.tab3 a { background: #63f }   
    .stripNav li.tab4 a { background: #63c }   
    .stripNav li.tab5 a { background: #00e }   
    .stripNav li a:hover {   
    background: #333;   
    }   
    .stripNav li a.current {   
    background: #000;   
    color: #fff;   
    }   
    .stripNavL, .stripNavR {    
    position: absolute;   
    top: 230px;   
    text-indent: -9000em;   
    }   
    .stripNavL a, .stripNavR a {   
    display: block;   
    height: 40px;   
    width: 40px;   
    }   
    .stripNavL {   
    left: 0;   
    }   
    .stripNavR {   
    right: 0;   
    }   
    .stripNavL {   
    background: url("images/arrow-left.gif") no-repeat center;   
    }   
    .stripNavR {   
    background: url("images/arrow-right.gif") no-repeat center;   
    }   
</style>

<script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script>

<script src="js/jquery-easing.1.2.pack.js" type="text/javascript"></script>   
    <script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>   
    <script src="js/coda-slider.1.1.1.pack.js" type="text/javascript"></script>