Jquery Lite Content Slider – Demo

HTML

<script src="http://www.aakashweb.com/resources/js/jquery.lite-content-slider.js"></script>
<div id="sliderMain" class="bottomShadow">
    <div class="contentWrap">
        <div class="content">
            1
        </div>
        
        <div class="content">
            2
        </div>
        
        <div class="content">
            3
        </div>
        
        <div class="content">
            4
        </div>
        
        <div class="content">
            5
        </div>
        
        <div class="content">
         6
        </div>
        
        <div class="content">
            7
        </div>
        
        <div class="content">
            8
        </div>
        
        <div class="content">
            9
        </div>
        
    </div>
</div>

<div class="buttonsWrap">
    RFQ Group 
    <a class="buttons active" href="#">1</a>
    <a class="buttons" href="#">2</a> 
    <a class="buttons" href="#">3</a>
    <a class="buttons" href="#">4</a>
    <a class="buttons" href="#">5</a> 
    <a class="buttons" href="#">6</a>
    <a class="buttons" href="#">7</a>
    <a class="buttons" href="#">8</a>
    <a class="buttons" href="#">9</a>
</div>

CSS

#sliderMain {
    width: 400px;
    padding: 10px;
    border: 5px solid #000000;
    margin: 0px auto;
    overflow:hidden;
}
.buttonsWrap{
    margin: 3px 0 0 0;
    text-align: center;
}
.buttons, .control{
    background: #000000;
    padding: 3px 10px;
    margin: 5px;
    line-height: 0px;
    color: #FFFFFF;
    text-decoration: none;
}
.active{
    background: #00CC66;
    color: #00FF00;
}
.buttons:hover, .control:hover{
    background: #0099FF;
}

JavaScript

$('.contentWrap').liteSlider({
    content : '.content',
    autoplay : false,
    buttonsClass : 'buttons',
    activeClass : 'active',
    controlBt : '.control',
    playText : 'Play',
    pauseText : 'Stop'
});