javascript Runtime error being thrown while using jCarousel

Question

I'm trying to use the jCarousel and when the page loads it throws this error..

JavaScript runtime error: Object doesn't support property or method 'jcarousel' 

and I get brought to this function...

(function($) {
$(function() {
    $('[data-jcarousel]').each(function() {
        var el = $(this);
        el.jcarousel(el.data());
    });

    $('[data-jcarousel-control]').each(function() {
        var el = $(this);
        el.jcarouselControl(el.data());
    });
});
})(jQuery);

and the error is at the fifth line.

here is my markup...

<div class="wrapper">
        <div class="jcarousel-wrapper">
            <div data-jcarousel="true" data-wrap="circular" class="jcarousel">
                <ul>
                    <li><img src="images/1.png" width="600" height="400" alt=""></li>
                    <li><img src="images/2.png" width="600" height="400" alt=""></li>
                    <li><img src="images/3.png" width="600" height="400" alt=""></li>
                    <li><img src="images/4.png" width="600" height="400" alt=""></li>
                </ul>
            </div>
            <a data-jcarousel-control="true" data-target="-=1" href="#" class="jcarousel-control-prev">&lsaquo;</a>
            <a data-jcarousel-control="true" data-target="+=1" href="#" class="jcarousel-control-next">&rsaquo;</a>
        </div>
    </div>

and here is scripts in my header...

<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
<link rel="stylesheet" href="http://localhost:3108/code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

<script src="jquery-1.10.2.min.js"></script>
<script src="jcarousel.data-attributes.js"></script>

I have tried just putting the function itself in the header tag and it still throws an error. I have searched for an answer on this and nothing specifically comes up.

Thanks

Answer 1

I'm certainly not an expert on jCarousel, but I'm not seeing where you actually include it?

I see something that looks like a plugin for it:

<script src="jcarousel.data-attributes.js"></script>

But I would expect to see the actual jCarousel script before that:

<script type="text/javascript" src="jquery.jcarousel.js"></script>

UPDATE:

What I mean, is that your full list of scripts needed in order to make this work are:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jcarousel.js"></script>
<script type="text/javascript" src="jcarousel.data-attributes.js"></script>

You need to have jQuery included, which you already do. You also need to have jCarousel included, which you currently do not. You just need to include that before the data-attributes plugin to make everything work.