【jQuery】スライダー（見せる数を制御できる）

by tea4two

HTML

<div id="container">
<ul id="slider">
    <li><figure><img src="http://dummyimage.com/300x300/000/fff.gif&text=001" alt=""><figcaption>sample 001</figcaptionp></figure></li>
    <li><figure><img src="http://dummyimage.com/300x300/080/fff.gif&text=002" alt=""><figcaption>sample 002</figcaptionp></figure></li>
    <li><figure><img src="http://dummyimage.com/300x300/900/fff.gif&text=003" alt=""><figcaption>sample 003</figcaptionp></figure></li>
    <li><figure><img src="http://dummyimage.com/300x300/fe5/fff.gif&text=004" alt=""><figcaption>sample 004</figcaptionp></figure></li>
    <li><figure><img src="http://dummyimage.com/300x300/cf8/fff.gif&text=005" alt=""><figcaption>sample 005</figcaptionp></figure></li>
    <li><figure><img src="http://dummyimage.com/300x300/988/fff.gif&text=006" alt=""><figcaption>sample 006</figcaptionp></figure></li>
    <li><figure><img src="http://dummyimage.com/300x300/65f/fff.gif&text=007" alt=""><figcaption>sample 007</figcaptionp></figure></li>
    <li><figure><img src="http://dummyimage.com/300x300/de0/fff.gif&text=008" alt=""><figcaption>sample 008</figcaptionp></figure></li>
</ul>
</div>

CSS

img {
    vertical-align: bottom
}
ul{
    list-style: none;
    margin: 0; padding: 0;
    width: 1000%;
    overflow: hidden;
}
li {
    width: 100px;
    float: left;
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0 5px;
}
li figure,
li figcaption {
    display: block;
    padding: 0;
    margin: 0;
}
li figure > img {
    width: 100%;
}