一页上有多个rcarousel

Question

我在使用rcarousel（http://ryrych.github.io/rcarousel/）在第二个轮播上显示左侧导航按钮时遇到问题。我一直在看它多年，似乎无法弄清楚我做错了什么。代码如下，旋转木马不工作的是carouselDirectory。

有什么想法吗？

...的Javascript

<script type="text/javascript">
    jQuery(function($) {

        $("#carousel").rcarousel({
            width: 180,
            height: 130,
            visible: 5,
            step: 1


        });

        jQuery(function($) {
            $("#carousel").rcarousel({
                auto: {
                    enabled: true,
                    interval: 3000,
                    direction: "next",


                }
            });

        });


        $("#carouselDirectory").rcarousel({
            width: 180,
            height: 130,
            visible: 5,
            step: 1,

            navigation: {
                prev: "#ui-banner-carousel-prev",
                next: "#ui-banner-carousel-next"


            }

        });

    }); 
</script>

HTML ...

<div id="business">
    <div style="background-color: #FFFFFF; margin-bottom: 1em;">
        <div id="carousel">
            <a href="http://www.com" target="_blank"><img src="images/employment.png" alt="Employment"/></a>
            <a href="http://www.com" target="_blank"><img src="images/property.png" alt="Property"/></a>
            <a href="http://www.com" target="_blank"><img src="images/rent.png" alt="Rent"/></a>
            <a href="http://www.com" target="_blank"><img src="images/land.png" alt="Land"/></a>
            <a href="http://www.com" target="_blank"><img src="images/business.png" alt="Business"/></a>
            <a href="http://www.com" target="_blank"><img src="images/franchise.png" alt="Franchise"/></a>
            <a href="http://www.com" target="_blank"><img src="images/health.png" alt="Health"/></a>
        </div>
        <a href="#" id="ui-carousel-next"><span>next</span></a>
        <a href="#" id="ui-carousel-prev"><span>prev</span></a>
    </div>
    <script type="text/javascript" src="widget/lib/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="widget/lib/jquery.ui.core.js"></script>
    <script type="text/javascript" src="widget/lib/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="widget/lib/jquery.ui.rcarousel.js"></script>
    <div class="business-title">
        Business Directory
    </div>
    <div id="carouselDirectory">
        <a href="#"><img src="images/small/business-directory.jpg" alt="business directory"/></a>
        <a href="#"><img src="images/small/blank.jpg" alt="image02"/></a>
        <a href="#"><img src="images/small/blank.jpg" alt="image02"/></a>
        <a href="#"><img src="images/small/blank.jpg" alt="image02"/></a>
        <a href="#"><img src="images/small/blank.jpg" alt="image02"/></a>
        <a href="#"><img src="images/small/blank.jpg" alt="image02"/></a>
        <a href="#"><img src="images/small/blank.jpg" alt="image02"/></a>
        <a href="#"><img src="images/small/blank.jpg" alt="image02"/></a>
        <a href="#"><img src="images/small/blank.jpg" alt="image02"/></a>
    </div>
    <a href="#" id="ui-banner-carousel-next"><span>next</span></a>
    <a href="#" id="ui-banner-carousel-prev"><span>prev</span></a>
</div>