javascript - 将响应式幻灯片主题应用于多个 slider 不起作用

Question

尝试将响应式幻灯片中的主题应用于我的导航(http://responsiveslides.com/themes/themes.html 第二个示例)。应用于第一个 slider 时，导航主题工作正常，但一旦我更改以下 slider 的命名空间，它就会停止正常运行。我无法导航下面的 slider ，而是通过第一个 slider 导航其他 slider 。

希望得到一些帮助。

前 2 个 slider 的 HTML...

<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>

slider 的 Javascript:

$("#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
});

主题样式:

.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

将第二个 slider 包装到 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;
}

你必须让你的parend div (.rslides_container) 成为相对的，因为<a>标签正在使用 position: absolute; .