CSS滑动容器包装

Question

我在尝试将此滑块包装在此网站上时遇到问题，我尝试用div div容器包装它并添加相对位置，但它并没有真正起作用。它让幻灯片有点混乱。我试图让它像一个约500像素的特定宽度，我不知道我做错了什么，任何人都可以请帮助谢谢。这里是链接js小提琴例如

link：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; }