From 780e8a6688e48da1bcc0357817e13ea1d5f8f659 Mon Sep 17 00:00:00 2001
From: Viljami S <viljami.salminen@gmail.com>
Date: Mon, 19 Mar 2012 21:17:59 +0200
Subject: [PATCH] Puts next/prev arrows on top of the slideshow

---
 demo/themes/demo_themes.css  | 47 ++++++++++++++++++++++++++++++++++--
 demo/themes/demo_themes.html | 26 +++++++++++---------
 2 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/demo/themes/demo_themes.css b/demo/themes/demo_themes.css
index 390d477..6f573db 100644
--- a/demo/themes/demo_themes.css
+++ b/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
 --------------------------------------------- */
diff --git a/demo/themes/demo_themes.html b/demo/themes/demo_themes.html
index 93451e2..8211f53 100644
--- a/demo/themes/demo_themes.html
+++ b/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>