Create a simple slider with CSS3 and JavaScript

To begin with, we need a nice container (the image of an iphone is perfect), with a hole in the center. We put a wrapper around the hole and then the content in the wrapper.

Live demo

The CSS:

/* phone: put it some where in the page */

#phone {

width: 750px;

height: 400px;

background:url(./iphone_4G.png);

position:absolute;

margin:50px 250px;

}

/* wrapper: as big as the hole in the iPhone */

#wrapper {

width: 499px;

height: 283px;

position: relative;

margin: 59px 126px;

overflow: hidden;

border: 2px solid

}

/* the trick is in content: very long, will contain all photos. 

wrapper overflow hidden, so it is visible only the current photo */

#content {

height: 283px;

background-color: #000000;

position: relative;

margin: 0 0;

transition: all 1s; /* here CSS3 Animation !!! (like iPhone) */

-moz-transition: all 1s;

-ms-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

I forgot ... the style of the photos:

photoslide {

position: relative;

width: 499px; /* same size as the wrapper */

height: 283px;

margin: auto;

text-align: center;

display: inline;

float: left;
background-size: contain; /* CSS3 adjusts the picture by itself !!! */

background-repeat: no-repeat;

background-position: center;

}

just below to the iPhone, the arrows to try scroll:

#keyboard {

position: absolute;

margin: 450px 600px;

}

The Html:

<div id="phone"> 
<div id="wrapper">
       <div id="content">
        // static in the example, three wired photos :-( 
        // but you can inject your photo div
        // from the server just with an ajax call
        <div class="photoslide" style="background-image: url(./uno.jpg);">&nbsp;</div>
        <div class="photoslide" style="background-image: url(./due.jpg);">&nbsp;</div>
        <div class="photoslide" style="background-image: url(./tre.jpg);">&nbsp;</div>
      </div>
    </div>
</div>
<p id="key">
<a href="#" onclick="left()">&lt;- indietro</a>
<a href="#" onclick="right()">avanti -&gt;</a>
</p>

The script:

<script type="text/javascript">
        var _width = 499, nrfoto = 3, r = 0, l = 0, dstart, dend

        function init() {  // to be executed onbody load
            x = document.getElementById("content")
            x.style.width = _width * nrfoto + "px";
        }

        // store the number of trips left and right not to come out from the iPhone :-)
        function left() {
            l += 1;
            var m = (-_width * r) + (_width * l)
            if (m != _width) {
                x = document.getElementById("content")
                x.style.transform = "translate(" + m + "px)"                     // magic css3!!!
                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;
        }
</script>