html - CSSスライドコンテナラップ

Question

このサイトで見つかったこのスライダーをラップしようとすると問題が発生します。div id コンテナーでラップして、相対位置を追加しようとしましたが、実際には機能しません。スライドを少し台無しにします。約500ピクセルのような特定の幅にしようとしています。何が間違っているのかわかりません。誰か助けてください。たとえば、リンクjsフィドルは次のとおりです

リンク: http://jsfiddle.net/KEqSF/92/

<div id="container">
 <div id="a1">
  <div id="a2">
    <div id="a3">
        <!-- Top Navigation -->
        <nav><a href="#a1">1</a><a href="#a2">2</a><a href="#a3">3</a></nav>

        <div class="pages">
            <!-- First Page #a1 -->
            <div id="i1" class="page">
                <a href="#a3" class="backbutton"></a>
                <a href="#a2" class="nextbutton"></a>
                <h1>Slide 1</h1>
            </div>

            <!-- Second Page #a2 -->
            <div id="i2" class="page">
                <a href="#a1" class="backbutton"></a>
                <a href="#a3" class="nextbutton"></a>
                <h1>Slide 2</h1>
            </div>

            <!-- Third Page #a3 -->
            <div id="i3" class="page">
                <a href="#a2" class="backbutton"></a>
                <a href="#a1" class="nextbutton"></a>
                <h1>Slide 3</h1>
            </div>
        </div>
    </div>
  </div>
</div>
</div>

そしてここにCSSがあります

 Basic Style/Positioning for all Pages */
body { overflow-x: hidden; /* Hide the other pages */ }

 #container {
  position: relative;

 }

.pages,
.page,
.page .backbutton,
.page .nextbutton  { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.page h1 { margin-top: 4em; 
           width: 300px; /* Make it show below the nav */ }   

.page .backbutton,
.page .nextbutton { width: 50%; }

.page .nextbutton { left: auto; right: 0; }

/* Pages */
#i2 { left: 100%; }
#i3 { left: 200%; }


/* Slide Effect */
.pages {
-webkit-transition: left 0.8s;
-moz-transition: left 0.8s;
-o-transition: left 0.8s;
-ms-transition: left 0.8s;
transition: left 0.8s;
}

#a1:target .pages { left: 0%; }
#a2:target .pages { left: -100%; }
#a3:target .pages { left: -200%; }

/* Top Navigation */
nav {
display: block;
width: 300px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
}


nav a {
  font: 2em/1 helvetica, arial;
  font-weight: bold;
  text-decoration: none;
  color: #aaa;
  text-align: center;
  background-color: #111;
  display: inline-block;
  width: 33%;
  -moz-transition: background 1s;
  -webkit-transition: background 1s;
  -o-transition: background 1s;
  -ms-transition: background 1s;
  transition: background 1s;
}

nav a:last-child { width: 34%; }
nav a:hover { background-color: #444; }

#a1:target nav a:first-child,
#a2:target nav a:nth-child(2),
#a3:target nav a:last-child { background-color: red; color: #fff; }

/* This is just make them less ugly */
body { font-family: sans-serif; text-align: center; }
h1 { font-size: 2em; }
#i1 { background-color: #fff; }
#i2 { background-color: #bbb; }
#i3 { background-color: #777; }