如何通过幻灯片查看活动箭头(下一个/上一个）

我的网站上有一个非常简单的幻灯片，我使用了一个很棒的幻灯片插件 - 循环插件。我的问题出在箭头上（下一个，上一个）。我想只激活箭头，然后是另一张幻灯片。

如果我有三张幻灯片。当第一张幻灯片显示活动按钮时，下一个活动按钮。当您查看时，第二个显示为活动下一个和上一个。当您查看时，第三张幻灯片仅显示为活动的上一张。

例：

• 3 张幻灯片：
  • 第一张幻灯片 - 仅按钮 下次放映
  • 第二张幻灯片 - 按钮 上一页和下一张显示器
  • 第三张幻灯片 - 仅按钮上一个显示

现场示例：

在我的网站上
进行现场演示在 jsfiddle 上的测试示例

j查询：

$('.slideshow > ul')
  .before('<div class="wrapper"><div class="content"><div class="slide-nav">') 
  .cycle({ 
       fx:     'scrollLeft', 
       speed:  '600', 
       timeout: 4000, 
       pager:  '.slide-nav',
       next:   '#next', 
       prev:   '#prev'
});

.HTML：

<div id="slideshow">
    <div class="slideshow">
        <div class="wrapper">
            <div class="content">
                <div class="slide-ntx-prv">
                    <a id="prev" href=""><span class="fa fa-chevron-left"></span></a>
                    <a id="next" href=""><span class="fa fa-chevron-right"></span></a>
                </div>
            </div><!-- /.content -->
        </div><!-- /.wrapper -->
        <ul>
            <li class="slide1">
                <div class="wrapper">
                    <div class="content">
                        <div>cena/noc od <span class="green-bold">67 EUR</span></div>
                        <h2>Vysoké tatry<span>876 apartmánů</span></h2>
                    </div><!-- /.content -->
                </div><!-- /.wrapper -->
            </li>
            <li class="slide2">
                <div class="wrapper">
                    <div class="content">
                        <div>cena/noc od <span class="green-bold">68 EUR</span></div>
                        <h2>Střední tatry<span>50 apartmánů</span></h2>
                    </div><!-- /.content -->
                </div><!-- /.wrapper -->
            </li>
            <li class="slide3">
                <div class="wrapper">
                    <div class="content">
                        <div>cena/noc od <span class="green-bold">69 EUR</span></div>
                        <h2>Nízké tatry<span>236 apartmánů</span></h2>
                    </div><!-- /.content -->
                </div><!-- /.wrapper -->
            </li>
        </ul>
    </div><!-- /.slideshow -->
</div><!-- /#slideshow -->