two easy slider in one html page javascript

Question

I have used easy slider for my slideshow. I need to use the same slider in two places in the same html page.

I have tried this but only one slider is working.

<script type="text/javascript" src="js/easySlider.packed.js"></script>
<script type="text/javascript">
    $(document).ready(function(){   
        $("#slider_single").easySlider();
        $("#slider_specials").easySlider(); 


});
</script>

Html code:

<div id="slider_single">
<ul>
<li><a href="#"><img src="images/slider1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slider2.jpg" alt="" /></a></li>
</ul>
</div>


<div id="slider_specials">
<ul>
<li><a href="#"><img src="images/slider3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slider4.jpg" alt="" /></a></li>
</ul>
</div>

How to fix this?

Answer 1

@lifeline Please refer this link for Easy Slider making Two Slider in Same HTML Page

(or) change your Script like this

<script type="text/javascript">
        $(document).ready(function(){   
            $("#slider_single").easySlider({
                auto: true,
                continuous: true

            });
            $("#slider_specials").easySlider({ 
                auto: true,
                continuous: true
            });
        }); 
    </script>