Как правильно подключить JavaScript слайдера.

<script src="{THEME}/js/jflow.plus.js" type="text/javascript"></script>
<script language="javascript">
    $(document).ready(function(){
        $("#myController").jFlow({
            controller: ".jFlowControl",
            slideWrapper : "#jFlowSlider",
            slides: "#mySlides",  
            selectedWrapper: "jFlowSelected",  
            width: "12px",  
            height: "263px",  
            duration: 290,  
            prev: ".jFlowPrev", 
            next: ".jFlowNext", 
            auto: true    
    });
});
</script>
<div id="mySlides">
    <div id="slide1">    
        <img src="{THEME}/imeges/slide1.jpg" alt="Slide 1 jFlow Plus" />
        <span><h3>Welcome to the First Slide!</h3><p>We hope you enjoy the jFlow Plus Slider - a light-weight slider for your web design needs. <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
    </div>        
    <div id="slide2">
        <img src="{THEME}/imeges/slide2.jpg" alt="Slide 2 jFlow Plus" />
        <span><h3>Hey you made it to the Second Slide!</h3><p>We Know you enjoy this plugin... it's not too hard to implement, right? <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
    </div>   
    <div id="slide3">
        <img src="{THEME}/imeges/slide3.jpg" alt="Slide 3 jFlow Plus" />
        <span><h3>Woah You're on the Third Slide</h3><p>You've completed quiet the journey! All the way from slide 1 to slide 3... congratulations! <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
    </div>
</div>

<div id="myController">
   <span class="jFlowControl"></span>
   <span class="jFlowControl"></span>
   <span class="jFlowControl"></span>
</div>

<span class="jFlowPrev"><div></div></span>
<span class="jFlowNext"><div></div></span>