coda slider

by tea4two

HTML

<script src="https://raw.github.com/KevinBatdorf/codaslider/gh-pages/js/jquery.coda-slider-3.0.js"></script>
<ul class="coda-slider"  id="slider-id">
    <li><a href="#"><img src="http://placekitten.com/g/120/75" alt="" /></a></li>
    <li><a href="#"><img src="http://placekitten.com/120/75" alt="" /></a></li>
    <li><a href="#"><img src="http://placekitten.com/g/120/75" alt="" /></a></li>
    <li><a href="#"><img src="http://placekitten.com/120/75" alt="" /></a></li>
</ul>

CSS

#slider-id li {
    float: left;
}
.coda-slider-wrapper .coda-slider {
    background: #f2f2f2;
    width: 120px;
    padding: 0 50px;
}
.coda-slider-wrapper .coda-slider .panel {
    width: 120px;
}

JavaScript

$(function(){
    $('#slider-id').codaSlider({
        autoSlide:true,
        autoHeight:false
    });
});