Jquery Image Slider not behaving

Question

I liked the look of this image slider:

http://coolcarousels.frebsite.nl/c/58/coolcarousel.html

and wanted to implement it. I copied and pasted the javascript, css, and html.

Here's the site: http://violetoeuvre.com/slider.html

html:

    <script> 

$(function() {

    $('#carousel').carouFredSel({
        width: 800,
        items: 3,
        scroll: 1,
        auto: {
            duration: 1250,
            timeoutDuration: 2500
        },
        prev: '#prev',
        next: '#next',
        pagination: '#pager'
    });

});

</script>
</div>
<div>

<div id="wrapper">
    <div id="carousel">
        <img src="img_slider/1.jpg" />
        <img src="img_slider/2.jpg" />
        <img src="img_slider/3.jpg" />
        <img src="img_slider/4.jpg" />
        <img src="img_slider/5.jpg" />
        <img src="img_slider/6.jpg" />
    </div>
    <a id="prev" href="#"></a>
    <a id="next" href="#"></a>
    <div id="pager"></div>
</div>
</div>

CSS:

    html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    background-color: #ff00ff;
    min-height: 700px;
}
body * {
    font-family: Arial, Geneva, SunSans-Regular, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 22px;
}

#wrapper {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 100px;
    width: 800px;
    height: 127px;
    padding: 10px;
    margin: -75px 0 0 -410px;
    position: absolute;
    left: 50%;
    top: 50%;
}
.caroufredsel_wrapper {
    border-radius: 90px;
}
#carousel img {
    width: 201px;
    height: 127px;
    margin: 0 5px;
    float: left;
}
#prev, #next {
    background: transparent url( img/carousel_control.png ) no-repeat 0 0;
    text-indent: -999px;
    display: block;
    overflow: hidden;
    width: 15px;
    height: 21px;
    position: absolute;
    top: 65px;
}
#prev {
    background-position: 0 0;
    left: 30px;
}
#prev:hover {
    left: 29px;
}           
#next {
    background-position: -18px 0;
    right: 30px;
}
#next:hover {
    right: 29px;
}               
#pager {
    text-align: center;
    margin: 0 auto;
    padding-top: 20px;
}
#pager a {
    background: transparent url(img/arrow1.png) no-repeat -2px -32px;
    text-decoration: none;
    text-indent: -999px;
    display: inline-block;
    overflow: hidden;
    width: 8px;
    height: 8px;
    margin: 0 5px 0 0;
}
#pager a.selected {
    background: transparent url(img/arrow2.png) no-repeat -12px -32px;
    text-decoration: underline;             
}

I downloaded the javascript zip file, and I'm sure that's what's missing in the code to make everything behave properly. I'm new to this, and I just don't know where to fit that part in. In the script? In another referenced file? (Tried these).

Thanks in advance. Claire

Answer 1

Slap me if I am wrong but I dont see any jQuery on your page :3

Answer 2

You can try to include jQuery Library as well :

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>

include before the slider script, you can add in the header in your case