CSS horizontal scrolling overflow with jQuery slider

问题

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.

<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"></div>
        <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
        <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
    </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.

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/2851126/css-horizontal-scrolling-overflow-with-jquery-slider

标签

jquery

css

jquery-plugins

javascript

horizontal-scrolling