Easy Slider Jquery Plugin

hello there i am trying to implement a website which has accordion and a slider.

It works like this. First accordion set is open on load. The slider in that view port is horizontal.

same thing for the second set of accordion But am not able to implement tw sliders on the same page.

I am using the following plugin: http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider

http://bakasura.in开发者_C百科/delight/

I see a couple of issues. The first is that you are using the wrong version of easySlider. It looks like you are using the older version instead of the newer 1.7 version: http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

You also have multiple copies of both the accordion and easyslider JavaScript file in your page:

<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>

There is no need for both, you need to pick one or the other:

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

Another problem is that you have 2 sets of prev/next buttons and they each have the same Id value. You should create unique Id values and then use the prevId and nextId features of easyslider to select the correct ones:

About buttons:

<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>

Work buttons:

<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>

New jQuery code:

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

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

Notice how the controlsShow option is used to hide the default controls of easySlider.