Я получаю это сообщение об ошибке при попытке создать слайдер изображений JQuery.

Uncaught ReferenceError: $ не определено

Вот моя НОВАЯ кодировка (ЗАМЕТЬТЕ, что я переместил скрипт на страницу, это было предложено Adobe.):

Green Cold-Formed Steel | Home


body,td,th {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
    color: #000;
    text-align: left;
}
body {
    background-color: #999;
}
a:link {
    color: #999;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #060;
}
a:hover {
    text-decoration: underline;
    color: #FFF;
}
a:active {
    text-decoration: none;
}
h1 {
    font-size: 14px;
    color: #060;
}
h2 {
    font-size: 12px;
    color: #999;
}
h3 {
    font-size: 9px;
    color: #FFF;
}
#next {
    background-image: url(Assets/slideshow/r_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: right;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slideshowwrapper {
    display: block;
    height: 500px;
    width: 1000px;
    margin: auto;
}
#container {
    background-color: #FFC;
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: auto;
}
#prev {
    background-image: url(Assets/slideshow/L_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: left;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slider {
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: hidden;
    position: absolute;
}
#NavBar {
    display: block;
    height: 50px;
    width: auto;
    position: relative;
    padding-bottom: 5px;
    float: none;
    vertical-align: middle;
}






  
     
    
      <a href="index.html"><img src="Assets/Logo/GFCS_Logo_NoBckgnd.png" width="288" height="108" alt="GCFS"></a>
    
     
  
  
     
    
    <img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Home"> <img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Solutions"> <img src="Assets/navigation/navbutton_down.png" width="100" height="50" alt="navi_down">

    
      
        
        
            <img src="Assets/slideshow/hyatt_apts.png" width="1000" height="500" alt="Hyatt Apartments">
            <img src="Assets/slideshow/mccommas.png" width="1000" height="500" alt="McCommas">
            <img src="Assets/slideshow/park_4200.png" width="1000" height="500" alt="Park 4200">
            <img src="Assets/slideshow/quail_run.png" width="1000" height="500" alt="Quail Run">
            <img src="Assets/slideshow/roofdale.png" width="1000" height="500" alt="Roofdale Roof">
            <img src="Assets/slideshow/tri_truss.png" width="1000" height="500"> 
        
      
    
     
  

<p> </p>



$(function(){
        $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 

        next:   '#next', 
        prev:   '#prev' 
    });
});

Мой путь к папке JS для моего сайта (локально) выглядит следующим образом: C: \ Users \ Andrew \ Desktop \ GCFS \ JS

Я новичок в мире программирования, но то, что я пытаюсь достичь, довольно просто. Насколько я знаю, мне не нужно иметь готовую функцию, и JavaScript должен запускаться автоматически. Спасибо вам за вашу помощь!

Из комментария

Когда я попробовал это, это также не удалось

Green Cold-Formed Steel | Home 

 
 
 $(function() {  
   $('#slider').cycle({ fx: 'scrollHorz', speed: 'fast', next: '#next', prev: '#prev' });
});