Slider fluide

by jeremyp

HTML

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<div id="wrap">
    <div id="content">
        <div id="page_1"><p>Bloc 1</p></div>
        <div id="page_2"><p>Bloc 2</p></div>
        <div id="page_3"><p>Bloc 3</p></div>
    </div>
</div>

CSS

#wrap {
    position: relative;
    max-width: 950px;
    height: 550px;
    overflow: hidden;
    margin: 0 auto;
}

#content {
    position: absolute;
    width: 1000%; /* 1000 * 950px / 100 = 9500px */
}

#content > div {
    float: left;
    width: 10%; /* 10 * 9500px / 100 = 950px */
    height: 550px;
}

#page_1 {background-color: #f00;}
#page_2 {background-color: #0f0;}
#page_3 {background-color: #00f;}

JavaScript

$('#wrap').scrollable();