Applying Responsive-slides theme to multiple sliders not working

Question

Trying to apply a theme from Responsive-slides for my navigation (http://responsiveslides.com/themes/themes.html second example). The navigation theme works fine when applying to the first slider, but as soon as I change the namespace of the following sliders it stops functioning properly. Instead of being able to navigate the below sliders I end up navigating the other sliders through the first slider.

Hope to receive some help.

HTML for first 2 sliders...

<ul id ="slider1" class="rslides">
    <li><img src="images/ciano/9ciano.jpg" alt=""></li>
    <li><img src="images/ciano/2ciano.jpg" alt=""></li>
    <li><img src="images/ciano/3ciano.jpg" alt=""></li>
    <li><img src="images/ciano/4ciano.jpg" alt=""></li>
    <li><img src="images/ciano/5ciano.jpg" alt=""></li>
    <li><img src="images/ciano/6ciano.jpg" alt=""></li>
    <li><img src="images/ciano/7ciano.jpg" alt=""></li>
    <li><img src="images/ciano/8ciano.jpg" alt=""></li>
    <li><img src="images/ciano/1ciano.jpg" alt=""></li>
  </ul>

 <ul id ="slider2" class="rslides">
    <li><img src="images/xavier/0xavier.jpg" alt=""></li>
    <li><img src="images/xavier/1xavier.jpg" alt=""></li>
    <li><img src="images/xavier/2xavier.jpg" alt=""></li>
    <li><img src="images/xavier/3xavier.jpg" alt=""></li>
    <li><img src="images/xavier/4xavier.jpg" alt=""></li>
    <li><img src="images/xavier/5xavier.jpg" alt=""></li>
    <li><img src="images/xavier/6xavier.jpg" alt=""></li>
    <li><img src="images/xavier/7xavier.jpg" alt=""></li>
    <li><img src="images/xavier/8xavier.jpg" alt=""></li>
    <li><img src="images/xavier/9xavier.jpg" alt=""></li>
  </ul>

Javascript for sliders:

$("#slider1").responsiveSlides({
  auto: false,             // Boolean: Animate automatically, true or false
  speed: 0,            // Integer: Speed of the transition, in milliseconds
  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
  pager: false,           // Boolean: Show pager, true or false
  nav: true,             // Boolean: Show navigation, true or false
  random: false,          // Boolean: Randomize the order of the slides, true or false
  pause: false,           // Boolean: Pause on hover, true or false
  pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "",     // Selector: Declare custom pager navigation
  namespace: "transparent-btns",   // String: Change the default namespace used
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback
});
$("#slider2").responsiveSlides({
  auto: false,             // Boolean: Animate automatically, true or false
  speed: 0,            // Integer: Speed of the transition, in milliseconds
  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
  pager: false,           // Boolean: Show pager, true or false
  nav: true,             // Boolean: Show navigation, true or false
  random: false,          // Boolean: Randomize the order of the slides, true or false
  pause: false,           // Boolean: Pause on hover, true or false
  pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "",     // Selector: Declare custom pager navigation
  namespace: "transparent-btns",   // String: Change the default namespace used
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback
});

Theme styling:

.transparent-btns_nav {
  z-index: 3;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 0;
  left: 0;
  display: block;
  background: #fff; /* Fix for IE6-9 */
  opacity: 0;
  filter: alpha(opacity=1);
  width: 48%;
  text-indent: -9999px;
  overflow: hidden;
  height: 91%;
  }

.transparent-btns_nav.next {
  left: auto;
  right: 0;
  }

.transparent-btns_nav:focus{
  outline: none;
  }

.transparent-btns_tabs{
  margin-top: 10px;
  text-align: center;
  }

.transparent-btns_tabs li{
  display: inline;
  float: none;
  _float: left;
  *float: left;
  margin-right: 5px;
  }

.transparent-btns_tabs a{
  text-indent: -9999px;
  overflow: hidden;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background: #ccc;
  background: rgba(0,0,0, .2);
  display: inline-block;
  _display: block;
  *display: block;
  -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  width: 9px;
  height: 9px;
  }

.transparent-btns_here a{
  background: #222;
  background: rgba(0,0,0, .8);
  }

Answer 1

wrap your second slider into div

<div class="rslides_container">
 <ul id ="slider2" class="rslides">
  <li><img src="images/xavier/0xavier.jpg" alt=""></li>
  <li><img src="images/xavier/1xavier.jpg" alt=""></li>
  <li><img src="images/xavier/2xavier.jpg" alt=""></li>
  <li><img src="images/xavier/3xavier.jpg" alt=""></li>
  <li><img src="images/xavier/4xavier.jpg" alt=""></li>
  <li><img src="images/xavier/5xavier.jpg" alt=""></li>
  <li><img src="images/xavier/6xavier.jpg" alt=""></li>
  <li><img src="images/xavier/7xavier.jpg" alt=""></li>
  <li><img src="images/xavier/8xavier.jpg" alt=""></li>
  <li><img src="images/xavier/9xavier.jpg" alt=""></li>
 </ul>
</div>

css

.rslides_container {
position: relative;
width:500px;
height:500px;
}

you have to make your parend div (.rslides_container) relative, because the <a> tag is using position: absolute;.