Javascript jQuery幻灯片（Ryan Florence）未在单击上运行

我已经试着让jQuery幻灯片（点击）工作了一段时间，但我不知道哪里出了问题。我正在与Ryan Florence的jQuery幻灯片导航一起工作：

我在这里整理了一个JSFIDLE：

我已经确保包含jQuery UI。他的站点上的示例中包含三个javascript文件（demo.js、jquery.rf.slideshow.js、jquery.rf.slideshownav.js）。我已经把它们全部放进了JSFIDLE的javascript部分

基本上，当我点击正确的按钮时，它会将“slideshow”div更新为正确的内容，但不会给我转换。起初我以为这是因为我用的是“divs”而不是图片，但我过去用过他简单的幻灯片来演示divs，效果很好。非常感谢你的帮助

这是我的导航栏：

<div class="slideshow" id="slideshow" style="width:1105px; height:1402px;">
<div id="red" style="background-color:red;height:1402px; width:1105px;">TEST 1</div>
<div id="green" style="background-color:green;height:1402px; width:1105px;">TEST 2</div>
<div id="blue" style="background-color:blue;height:1402px; width:1105px;">TEST 3</div>
</div>

我把它设置得很奇怪（对于将来有这个问题的人）。通过这张幻灯片，实际的锚href没有做任何让本演示网站的源代码感到困惑的事情

这与锚定标签的顺序和幻灯片的顺序有关。第一个对应于第一个，等等

$(function(){
  $('#slideshow').slideshownav({
    transition: 'push(#{direction})',
    mode: 'vertical',
    navSelector: '> ul > li > a',
    duration: 400,
    autoPlay: false
  });
});