jCarousel控件不工作，JavaScript出现问题

因此，我试图创建一个可以在图像之间导航的jCarousel，我对用于导航旋转木马的JavaScript控件有问题，当单击旋转木马上的下一个导航控件时，什么都没有发生。如果您能帮我解决问题，我们将不胜感激。我一直在使用jCarousel提供的示例来提供帮助，但我仍然没有得到它。 编辑-CSS很好，工作正常

HTML

---

您能更具体地说明什么是不工作和有问题吗？到底什么事情没有发生，而应该发生？@别担心，导航控制不起作用。按钮显示良好，但单击转盘上的下一个导航按钮时不会发生任何事情。A在javascript顶部有$document.readyfunction{}，其中没有任何内容。通常在JQuery中，我可以看到它里面的所有其他函数。我看到slideshowQuizContent调用slideshowQuizContent，但是什么时候调用slideshowQuizContent？

<link rel="stylesheet" href="./scripts/jquery-ui-themes-1.11.3/themes/base/jquery-ui.css">      
<script src="./scripts/jquery-1.11.2.min.js"></script>
<script src="./scripts/jquery-ui-1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="../../libs/jquery/jquery.js"></script>
<script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script>


<div id ="content">
    <div id="welcomeMessage">
    WELCOME! Select a quiz type from the menu above to get started!
    </div>
    <div id="slideshowQuiz">            
        Slideshow Quiz
        <div id="jcarousel" class="jcarousel">
            <ul>
            <li><p>QUESTION 1</p><img src="./images/niagrafalls.jpg" width="600" height="400" alt="">   </li>
            <li><img src="./images/brooklynbridge.jpg" width="600" height="400" alt=""> </li>
            </ul>
        </div>
        <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
        <a href="#" class="jcarousel-control-next">&rsaquo;</a>
        <p class="jcarousel-pagination">
        </p>
    </div>
</div>

$(document).ready(function(){       
})

function slideshowQuizContent()
{
    $('#slideshowQuiz').show();
    $('#welcomeMessage').hide();
    slideshowQuiz();
}

function slideshowQuiz()
{
    (function($) {
    $(function() {
        $('.jcarousel').jcarousel();

        $('.jcarousel-control-prev')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });

        $('.jcarousel-pagination')
            .on('jcarouselpagination:active', 'a', function() {
                $(this).addClass('active');
            })
            .on('jcarouselpagination:inactive', 'a', function() {
                $(this).removeClass('active');
            })
            .jcarouselPagination();
    });
})(jQuery);             
}