如何创建两个基于目录的滑块实例

Update:经过一番混乱，原来问题出在我的样式表上。两个滑块实际上都在加载，但是，位置导致它们重叠，隐藏了第二个(或任何额外的)滑块。

我一直在尝试创建这个jQuery滑块的两个实例，使用来自特定目录的图像。文件夹由不同的脚本生成，每个文件夹包含18个图像。似乎只有第一个滑块有效。

你可以在这里查看这个问题的实时示例

jQuery是相当直接的，但是，请注意，我还在学习PHP，但我已经能够列出文件夹在我的主目录和创建什么将是多个滑块的正确标记。

<?php
$a = 0;
$b = 0;
$c = 0;
if ($handle = opendir('.')) {
$blacklist = array('.', '..', 'frames', 'carbon_fibre.png', 'panel.png', 'sort.php', 'squares.png', 'test.php', 'test.txt', '360logo.png', '.DS_Store', 'js');
while (false !== ($file = readdir($handle))) {
    if (!in_array($file, $blacklist)) {
        echo "<div id='". ++$a ."'>". ++$b ."</div>";
        echo "<br>";
        echo "<script>
$('#". ++$c ."').directorySlider({
animation: 'fade',
filebase: 'a',
directory: '".$file."/',
extension: 'jpg',
numslides: 18,
height: 200,
timeout: 100,
speed: 100
});
</script><br>";
    }
}
closedir($handle);
}
?>

这个脚本的输出是:

<div id='1'>1</div><br><script>
$('#1').directorySlider({
animation: 'fade',
filebase: 'a',
directory: '20140529-1740/',
extension: 'jpg',
numslides: 18,
height: 200,
timeout: 100,
speed: 100
});
</script><br><div id='2'>2</div><br><script>
$('#2').directorySlider({
animation: 'fade',
filebase: 'a',
directory: '20140529-1751/',
extension: 'jpg',
numslides: 18,
height: 200,
timeout: 100,
speed: 100
});
</script>

输出似乎是正确的，它正确地列出了我的目录在脚本中，但我仍然只看到第一个滑块工作。我应该提到的是，这些目录是自动生成的，并按创建的日期和时间命名。

请让我知道如果你有任何建议或见解，为什么我遇到这个问题。我很乐意提供更多的信息。我真的很感谢你的时间。