Javascript slidesjs的另一个滑块中的滑块

我试图将一个带有控件的滑块放在另一个带有使用SlidesJS控件的滑块中，同时我做了以下操作：

JS:

HTML:

幻灯片1/4
幻灯片1/4

但是当你从内部滑块更改幻灯片，然后从外部滑块更改幻灯片时，我有一个错误，因为当你回来查看内部滑块时，它都是空白的，但是当你尝试从内部滑块更改幻灯片时，你可以看到它在正确的幻灯片中，但只是没有显示它

有人能帮我纠正这个错误吗？

为什么会出现这个错误

这不是代码或插件中的错误。SlidesJS的实际设计/开发方式不支持嵌套滑块。如果您查看插件的代码，它会使用

children（）

函数来检测该特定滑块中的所有幻灯片，以隐藏它们，并仅使活动幻灯片可见

这在常规滑块中非常有效，但在另一个滑块（

#slides2

）中有一个滑块（

#slides

），如下所示（我将这些幻灯片命名以稍后解释）：

单击幻灯片A时，插件显示幻灯片A，隐藏幻灯片B、C和D。单击幻灯片1时，插件显示幻灯片1，隐藏幻灯片2、3和4。。。还有A、B、C和D！这是因为插件使用

children（）

当您滑入
#slides2
时，唯一受影响的幻灯片是
#slides2
的子幻灯片：A、B、C和D。但当您滑入
#slides
时，您会影响它的所有幻灯片子幻灯片，包括
#slides2
下的幻灯片：1、A、B、C、D、2、3和4

正如您所见，这是插件设计/开发的预期行为

如何“修复”此行为

有一种方法可以修复这种效果，它可能不会太漂亮。这样做的目的是在选择包含外部滑块的滑块时显示内部滑块滑块（是的，有点混乱，但如果您在代码中看到它，就不会那么复杂）：

由于一张图片价值1000字，下面是您的代码演示：


$（函数（）{
$（“#幻灯片”）.slidesjs({
宽度：600，
身高：400，
回拨：{
已加载：函数（编号）{
//使用浏览器控制台查看日志
log（'SlidesJS:Loaded with slide#'+number）；
//在日志中显示开始幻灯片
$（'#slidesjs log.slidesjs幻灯片编号'）。文本（编号）；
},
开始：功能（编号）{
//使用浏览器控制台查看日志
log（'SlidesJS:Start Animation on slide#'+number）；
},
完成：功能（编号）{
//使用浏览器控制台查看日志
log（'SlidesJS:Animation Complete.当前幻灯片为#'+编号）；
//修理
//如果在外部滑块中选择了第一个滑块，则显示内部滑块
if（number==1）{$（“#slides2.slidesjs slide:first child”）.css（“display”，“block”）；}
//更改动画完成时的幻灯片编号
$（'#slidesjs log.slidesjs幻灯片编号'）。文本（编号）；
}
}
});
});
$（函数（）{
$（'#slides2'）。slidesjs({
宽度：500，
身高：175，
回拨：{
已加载：函数（编号）{
//使用浏览器控制台查看日志
console.log（'SlidesJS2:加载了幻灯片#'+编号）；
//在日志中显示开始幻灯片
$（'#slidesjs-log2.slidesjs-slide-number2'）。文本（编号）；
},
开始：功能（编号）{
//使用浏览器控制台查看日志
log（'SlidesJS2:Start Animation on slide#'+编号）；
},
完成：功能（编号）{
//使用浏览器控制台查看日志
log（'SlidesJS2:动画完成。当前幻灯片为#'+编号）；
//更改动画完成时的幻灯片编号
$（'#slidesjs-log2.slidesjs-slide-number2'）。文本（编号）；
}
}
});
});
/*防止幻灯片在加载时闪烁*/
#幻灯片{
显示：无
}
#幻灯片2{
显示：无；
边框：1px纯黑；；
}
/*将幻灯片居中*/
.集装箱{
保证金：0自动
}
/*在分页中显示活动项*/
.slidesjs分页。活动{
颜色：红色；
}
/*媒体对响应性布局的要求*/
/*适用于平板电脑和智能手机*/
@介质（最大宽度：767px）{
身体{
左侧填充：10px；
右边填充：10px；
}
.集装箱{
宽度：自动
}
}
/*智能手机*/
@介质（最大宽度：480px）{
.集装箱{
宽度：自动
}
}
/*适用于小型显示器，如笔记本电脑*/
@介质（最小宽度：768px）和（最大宽度：979px）{
.集装箱{
宽度：724px
}
}
/*对于较大的显示器*/
@介质（最小宽度：1200px）{
.集装箱{
宽度：自动
}
}

幻灯片1/4
幻灯片1/4
WOOW！太棒了！非常感谢你！你真是不可思议！
$(function() {
  $('#slides').slidesjs({
    width: 600,
    height: 300,
    callback: {
      loaded: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Loaded with slide #' + number);

        // Show start slide in log
        $('#slidesjs-log .slidesjs-slide-number').text(number);
      },
      start: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Start Animation on slide #' + number);
      },
      complete: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Animation Complete. Current slide is #' + number);

        // Change slide number on animation complete
        $('#slidesjs-log .slidesjs-slide-number').text(number);
      }
    }
  });
});

$(function() {
  $('#slides2').slidesjs({
    width: 500,
    height: 175,
    callback: {
      loaded: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Loaded with slide #' + number);

        // Show start slide in log
        $('#slidesjs-log2 .slidesjs-slide-number2').text(number);
      },
      start: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Start Animation on slide #' + number);
      },
      complete: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Animation Complete. Current slide is #' + number);

        // Change slide number on animation complete
        $('#slidesjs-log2 .slidesjs-slide-number2').text(number);
      }
    }
  });
});

<div class="container">
    <div id="slides">
      <div>

   <div id="slides2">
      <div>
        <img src="http://placehold.it/600x300/c66/fff&text=[slide+1]" width="100%" alt=""/>
      </div>
      <div>
        <img src="http://placehold.it/600x300/6c6/fff&text=[slide+2]" width="100%" alt=""/>
      </div>
      <div>
        <img src="http://placehold.it/600x300/36a/fff&text=[slide+3]" width="100%" alt=""/>
      </div>
      <div>
        <img src="http://placehold.it/600x300/666/fff&text=[slide+4]" width="100%" alt=""/>
      </div>
    </div>
<div id="slidesjs-log2">Slide <span class="slidesjs-slide-number2">1</span> of 4</div>
      </div>

      <div>
        <img src="http://placehold.it/600x300/6c6/fff&text=[slide+2]" width="100%" alt=""/>
      </div>
      <div>
        <img src="http://placehold.it/600x300/36a/fff&text=[slide+3]" width="100%" alt=""/>
      </div>
      <div>
        <img src="http://placehold.it/600x300/666/fff&text=[slide+4]" width="100%" alt=""/>
      </div>
    </div>
<div id="slidesjs-log">Slide <span class="slidesjs-slide-number">1</span> of 4</div>
</div>

- SLIDER #slides
    - Slide 1
         - SLIDER #slides2
             - Slide A
             - Slide B
             - Slide C
             - Slide D
    - Slide 2
         - Content of slide 2
    - Slide 3
         - Content of slide 3
    - Slide 4
         - Content of slide 4

// this code would go in the completed section of the parent slider
// we use 1, because the slide 1 contains the inner slider
if (number == 1) { 
    // show the first slide of the inner slider
    $("#slides2 .slidesjs-slide:first-child").css("display", "block");
}