quick slideshow test

by jakie8

HTML

<div id="show">
    <div id="prev"></div>
    <ul>
        <li><img src="http://placehold.it/260x180" /></li>
        <li><img src="http://placehold.it/260x180" /></li>
        <li class="active"><img src="http://placehold.it/260x180" /></li>
        <li><img src="http://placehold.it/260x180" /></li>
        <li><img src="http://placehold.it/260x180" /></li>
    </ul>
    <div id="next"></div>
</div>

CSS

body{
    background:#000;
}

#show {
    margin: 20px auto;
    overflow:hidden;
    position:relative;
    
    width: 340px;
}

#show ul{
    margin:0;
    padding:0;
    height: 180px;
}
#show ul li{
    display:inline-block;
}
#prev, #next{
    width:40px;
    height:180px;
    background-color:red;
    position:absolute;
    left:0;
    top:0;
}
#next{
    right:0;
}

JavaScript

//Set UL Width
var fWidth = 0;
$('#show img').each(function(){
   fWidth += parseInt($(this).width());
});
$('#show ul').css({
    width: fWidth
});