iPhoneSlider

by wonderboycb

HTML

<body onload="init();">
    <div id="phone">
        <div id="wrapper">
            <div id="content">
                <div class="photoslide" style="background-image: url(http://s24.postimg.org/kmsh7t07l/one.jpg);">&nbsp;</div>
                <div class="photoslide" style="background-image: url(http://s24.postimg.org/908d6ocwh/three.jpg);">&nbsp;</div>
                <div class="photoslide" style="background-image: url(http://s24.postimg.org/7wo8ups9d/two.jpg);">&nbsp;</div>
            </div>
        </div>
    </div>
    <p id="key"> <a href="#" onclick="left()">&lt;- indietro</a>  <a href="#" onclick="right()">avanti -&gt;</a> 
    </p>
</body>

CSS

#phone {
    width: 750px;
    height: 400px;
    background:url(http://s11.postimg.org/l1qphuvr7/iphone_4_G.png);
    position:absolute;
    margin:50px 50px;
}
#wrapper {
    width: 499px;
    height: 283px;
    position: relative;
    margin: 59px 126px;
    overflow: hidden;
    border: 2px solid
}
#content {
    /*width: 1497px;*/
    height: 283px;
    background-color: #000000;
    position: relative;
    margin: 0 0;
    transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
}
.photoslide {
    position: relative;
    width: 499px;
    height: 283px;
    margin: auto;
    text-align: center;
    display: inline;
    float: left;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#key {
    position: absolute;
    margin: 450px 350px;
}

JavaScript

var _width = 499,
    nrfoto = 3,
    r = 0,
    l = 0,
    dstart, dend

    function init() {
        x = document.getElementById("content")
        x.style.width = _width * nrfoto + "px";
    }

    function left() {
        l += 1;
        var m = (-_width * r) + (_width * l)
        if (m != _width) {
            x = document.getElementById("content")
            x.style.transform = "translate(" + m + "px)"
            x.style.webkitTransform = "translate(" + m + "px)"
            x.style.OTransform = "translate(" + m + "px)"
            x.style.MozTransform = "translate(" + m + "px)"
        } else l -= 1;
    }

    function right() {
        r += 1;
        var m = (-_width * r) + (_width * l)
        if (m != -_width * nrfoto) {
            x = document.getElementById("content")
            x.style.transform = "translate(" + m + "px)"
            x.style.webkitTransform = "translate(" + m + "px)"
            x.style.OTransform = "translate(" + m + "px)"
            x.style.MozTransform = "translate(" + m + "px)"
        } else r -= 1;
    }