views:

597

answers:

2

I'm trying to setup a full screen jquery slider. I've broken the project into two steps 1) css and 2) js.

1) CSS, below is a picture of what I'm shooting for (no fixed height) and below that is the code I have so far that doesn't work.

Example

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css">

        /* Positioning */
        #container { width: 2500px; }
        .block { display: inline; }

        /* Styling */
        .block img { padding: 5px; }

    </style>
</head>
<body>
    <div id="container">
        <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"&gt;&lt;/div&gt;
        <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"&gt;&lt;/div&gt;
        <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"&gt;&lt;/div&gt;
    </div>
</body>
</html>

2) Javascript, using jquery I'd like the divs to slide left when clicked on them... like the jQuery Coda Slider if possible.

Thanks, any help is appreciated.

A: 

You would need to start by setting the css of the container div to have a fixed width and overflow set to hidden so only what is within the area shows up:

#container{
  width:500px;
  height:200px;
  overflow:hidden;
}

How did you want the slider to work? Automatic? Button press? there are a few plugins that could probably take care of it automatically

kilrizzy
I'd like to be able to click on the next div, to slide left (kinda like the graphic above). Also outside of the container I need to have a nav link that will go to the div.
Jeffrey
I really need it to look like the graphic above, so displaying the next slide is crucial and all the slides are going to be different heights. So I'll set the overflow-x to hidden and clip: auto in the body.
Jeffrey
+1  A: 

Look that thing: http://apirocks.com/html5/html5.html (Test with Chrome)

Nicolas Viennot
Nice. Very close to what I need. Wonder if it can be setup so that just the container slides and the header and footer stays constant.
Jeffrey
I guess with a couple of absolute positioned divs you could
Nicolas Viennot
okay, messed around with it and am having a difficult time getting the relative footer to stay below the absolute sliding container... any thoughts.
Jeffrey