Puts next/prev arrows on top of the slideshow

demo/themes/demo_themes.css

@@ -19,12 +19,55 @@ body {
 
 h1 {
   font: 600 24px/32px sans-serif;
-}
+  }
 
 .rslides {
   margin: 50px auto 0;
-}
+  }
+
+.container {
+  position: relative;
+  }
+
+.rslides1_nav_prev,
+.rslides1_nav_next {
+  position: absolute;
+  -webkit-tap-highlight-color: rgba(0,0,0,.01);
+  top: 50%;
+  left: 0;
+  background: rgba(0,0,0, .8);
+  text-decoration: none;
+  padding: 0 20px;
+  height: 40px;
+  line-height: 40px;
+  margin-top: -30px;
+  color: #fff;
+  }
+
+.rslides1_nav_next {
+  left: auto;
+  right: 0;
+  }
+
+.rslides2_nav_prev,
+.rslides2_nav_next {
+  position: absolute;
+  -webkit-tap-highlight-color: rgba(0,0,0,.01);
+  top: 0;
+  left: 0;
+  background: transparent;
+  text-decoration: none;
+  width: 40%;
+  text-indent: -9999px;
+  overflow: hidden;
+  height: 100%;
+  color: #fff;
+  }
 
+.rslides2_nav_next {
+  left: auto;
+  right: 0;
+  }
 
 /* PAGINATION STYLE 2
 --------------------------------------------- */

demo/themes/demo_themes.html

@@ -22,7 +22,7 @@
     // Slideshow 4
     $("#slides2").responsiveSlides({
       auto: false,
-      pagination: false,
+      pagination: true,
       nav: true,
       fade: 300,
       maxwidth: 800
@@ -35,18 +35,22 @@
     <h1>Alternative pagination styles</h1>
 
     <!-- Slideshow 1 -->
-    <ul id="slides1">
-      <li><img src="../1.jpg" alt="" /></li>
-      <li><img src="../2.jpg" alt="" /></li>
-      <li><img src="../3.jpg" alt="" /></li>
-    </ul>
+    <div class="container">
+      <ul id="slides1">
+        <li><img src="../1.jpg" alt="" /></li>
+        <li><img src="../2.jpg" alt="" /></li>
+        <li><img src="../3.jpg" alt="" /></li>
+      </ul>
+    </div>
 
     <!-- Slideshow 2 -->
-    <ul id="slides2">
-      <li><a href="#"><img src="../1.jpg" alt="" /></a></li>
-      <li><a href="#"><img src="../2.jpg" alt="" /></a></li>
-      <li><a href="#"><img src="../3.jpg" alt="" /></a></li>
-    </ul>
+    <div class="container">
+      <ul id="slides2">
+        <li><img src="../1.jpg" alt="" /></li>
+        <li><img src="../2.jpg" alt="" /></li>
+        <li><img src="../3.jpg" alt="" /></li>
+      </ul>
+    </div>
 
   </div>
 </body>