Слайдер контента

Либо слайдер, либо вертикальные вкладки (tabs) для контента суть одна. Работает всё довольно просто. У нас есть ul список с 3-я кнопками, и каждая кнопка имеет связь с содержимым правой панели.

HTML

В шапке подключаем скрипты:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/jаvascript" src="jquery.scrollto.js"></script>

HTML состоит из двух разделов:
UL список: это список кнопок, добавить можно любое количество или же оформить так, как вы захотите.
Слайдер: В слайдер мы помещаем все содержимое панелей. В нашем случае, 3 панели с уникальным идентификатором panel-1, panel-2 и panel-3. Панель мы будем скрывать с помощью overflow:hidden в классе mask.

<div id="hero-slider">
    <ul>
        <li><a href="#" rel="#panel-1" class="active">Item 1</a></li>
        <li><a href="#" rel="#panel-2">Item 2</a></li>
        <li><a href="#" rel="#panel-3">Item 3</a></li>
    </ul>
    <div class="mask">
        <div class="slider-body">
            <div class="panel" id="panel-1">
                <h2>Название 1</h2>
                <p>Контент 1</p>
            </div>
            <div class="panel" id="panel-2">
                <h2>Название 2</h2>
                <p>Контент 2</p>
            </div>
            <div class="panel" id="panel-3">
                <h2>Название 3</h2>
                <p>Контент 3</p>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>

CSS

Единственной сложностью в CSS будет .mask, нужно будет убедиться, что установлен overflow для hidden, чтобы скрыть панели. А также размер panel и mask должны быть одинаковыми.

#hero-slider {
    text-align:left;
    background-color:#efefef;
    border:1px solid #ccc; width:450px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    margin:0 auto;
    font-family:arial;
}
 
#hero-slider .mask {
    float:left;
    width:300px;
    height:280px;
    margin:15px 0 0 10px;
    overflow:hidden;
}
 
#hero-slider .panel {
    width:300px;
    height:280px;
    text-align:left;
}
 
#hero-slider ul {
    margin:0;
    padding:15px 15px 0 15px;
    list-style:none;
    float:left;
    border-right:1px solid #dedede;
    height:285px;
}
 
#hero-slider ul li {
    margin:10px 0;
}
 
#hero-slider ul a {
    outline:none;
    text-decoration: underline;
    display:block;
    width:75px;
    height:74px;
    text-indent:-999em;
}
 
#hero-slider a {
    background: url(button.png) no-repeat 0 0;
}
 
#hero-slider ul a.active {
    background-position: -75px;
}
 
.panel h2 {
    padding:15px 0 0 0;
    color:#0058a9;
}
 
.panel p {
    color:#666;
}
 
.clear {clear:both}

JS

//append click event to the UL list anchor tag
$('#hero-slider ul a').click(function () {
     
    //reset all the items
    $('#hero-slider ul a').removeClass('active');
         
    //set current item as active
    $(this).addClass('active');
         
    //scroll it to the right position
    $('.mask').scrollTo($(this).attr('rel'), 300);
         
    //disable click event
       return false;
         
});