简易滑块 Jquery 插件

Question

你好，我正在尝试实现一个有手风琴和滑块的网站。

它的工作原理是这样的。第一个手风琴组在加载时打开。该视口中的滑块是水平的。

第二组手风琴也是如此 但我无法在同一页面上实现两个滑块。

我正在使用以下插件： http://cssglobe。 com/post/3783/jquery-plugin-easy-image-or-content-slider

http://bakasura.in/delight/

Answer 1

我看到几个问题。首先是您使用的 easySlider 版本错误。看起来您正在使用旧版本而不是较新的 1.7 版本： http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

您还拥有两者的多个副本页面中的 Accordion 和 easyslider JavaScript 文件：

<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript" src="js/jquery.accordion.min.js"></script>
<script type="text/javascript" src="js/easySlider.js"></script>
<script type="text/javascript" src="js/easySlider.packed.js"></script>

不需要两者，您需要选择其中之一：

<script type="text/javascript" src="js/jquery.accordion.min.js"></script>
<script type="text/javascript" src="js/easySlider.js"></script>

另一个问题是您有 2 组上一页/下一页按钮，并且它们各自具有相同的 Id 值。您应该创建唯一的 Id 值，然后使用 easyslider 的 prevId 和 nextId 功能来选择正确的值：

关于按钮：

<div class="sub-next"><span id="aboutNextBtn"><a href="javascript:void(0);"><img src="images/control_next.png"></a></span></div>
<div class="sub-prev"><span id="aboutPrevBtn"><a href="javascript:void(0);"><img src="images/control_back.png"></a></span></div>

工作按钮：

<div class="control-prev"> <span id="workNextBtn"><a href="javascript:void(0);"><img src="images/control_prev.gif" width="36" height="30"></a></span></div>
<div class="control-next"><span id="workPrevBtn"><a href="javascript:void(0);"> <img src="images/control_nxt.gif" width="36" height="30"></a></span></div>

新 jQuery 代码：

$("#slider").easySlider({
    prevId: 'aboutPrevBtn',
    nextId: 'aboutNextBtn',
    continuous: true, 
    controlsShow: false
});

$("#workcase").easySlider({
    prevId: 'workNextBtn', 
    nextId: 'workPrevBtn', 
    controlsShow: false
});

请注意，controlsShow 选项如何用于隐藏 easySlider 的默认控件。