title: Jquery Slider not working in my first ever website?
body: <p>I started creating my first ever website(incomplete at the moment) just a few hours ago and got stumbled upon this problem. My jquery slider is not working but all three images for the slider appears on my website. I've already checked link rel directory path and changed it a couple of times but it's still not working. Hope you guys can help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.slider1').bxSlider({
   mode: 'fade',
   captions: false,
   auto:true,
   pager:false,
      
  });
  $('.slider2').bxSlider({
   pager:false,
   captions: true,
   maxSlides: 3,
   minSlides: 1,
   slideWidth: 230,
   slideMargin: 10
  });
  $('.slider3').bxSlider({
   mode: 'fade',
   captions: false,
   auto:true,
   pager:false,
   controls:false,
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/**Here is the html(Main.html):**  **Here is the css(styles.css):**/  
  @import url(http://fonts.googleapis.com/css?family=Black+Ops+One:400,700); /*--- Header --*/
   @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); /*---    Navigation --*/
  * {
   margin: 0;
   border: 0;
   padding: 0;
  }
  body {
   background-color: #FEFBEF;
   background-color: white;
  }
  .clearfix {
   clear: both;
  }
  #wrapper {
   margin: 0 auto;
   max-width: 1120px;
   background: #FEFBEF;
   overflow: auto;
   background-color: black;
  }
  #main_header {
   width: 100%;
   border: 1px solid black;
   font-family: 'Black Ops One', sans-serif;
   background-color: black;
   color: white;
  }
  #main_header h1 {
   float: left;
   font-size: 380%;
   margin: -10% 0 0 2%;
  }
  #callout {
   margin: 50px 20px 0 0;
  }
  #callout h2 {
   text-align: right;
   color: white;
  }
  #callout p {
   text-align: right;
   padding: 0%;
   color: grey;
   font-size: 20px;
   margin-bottom: 3px;
  }
  #nav_menu {
   width: 100%;
   height: 10%;
   background-color: white;
  }
  #nav_menu li {
   display: inline-block;
   margin: 20px 20px 20px 63px;
   font-family: 'Open Sans', sans-serif;
   font-size: 20px;
   font-weight: bold;
  }
  #nav_menu li a {
   text-decoration: none;
   color: black;
  }
  /*--- Start Image Slider --*/
  .slider {
   max-width: 1020px;
   box-shadow: 1% 2% 5% 0 rgba(0, 0, 0, 0.07);
  }
  .slider1 img {
   width: 100%;
   margin: 0 auto;
  }
  .slider .bx-wrapper .bx-controls-direction a {
   outline: 0 none;
   position: absolute;
   text-indent: -9999px;
   top: 40%;
   height: 71px;
   width: 40px;
   z-index: -1;
   transition: all 0.7s;
  }
  .slider .bx-wrapper:hover .bx-controls-direction a {
   z-index: 5;
  }
  .slider .bx-wrapper .bx-prev {
   background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/left-arrow.png") no-repeat 8px 13px;
   left: 0px;
  }
  .slider .bx-wrapper .bx-prev:hover {
   background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/left-arrow.png") no-repeat 8px 18px;
  }
  .slider .bx-wrapper .bx-next {
   background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/right-arrow.png") no-repeat 10px 12px;
   right: 0px;
  }
  .slider .bx-wrapper .bx-next:hover {
   background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/right-  arrow.png") no-repeat 10px 17px;
  }
  /*--- End Image Slider --*/
  
  .one-third {
   width: 28%;
   float: left;
   margin: 2% 0 3% 4%;
   text-align: center;
   border: 1px solid black;
   height: 50%;
   background-color: white;
  }
  footer {
   font-family: 'Open Sans', sans-serif;
   font-weight: bold;
   text-align: center;
   width: 100%;
   height: 6%;
   background-color: white;
   overflow: auto;
  }
  footer p {
   margin-top: 1%;
  }
  /*  **here is another css(jquery.bxslider.css):** */
  
  
       .bx-wrapper {
   max-width: 1020px;
   position: relative;
   padding: 0;
   *zoom: 1;
  }
  .bx-wrapper img {
   max-width: 1020px;
   display: block;
  }
  /** THEME
       ===================================*/
  
  .bx-wrapper .bx-viewport {
   left: 0px;
   background: #fff;
   /*fix other elements on the page moving (on Chrome)*/
   -webkit-transform: translatez(0);
   -moz-transform: translatez(0);
   -ms-transform: translatez(0);
   -o-transform: translatez(0);
   transform: translatez(0);
  }
  .bx-wrapper .bx-pager,  .bx-wrapper .bx-controls-auto {
   position: absolute;
   bottom: -30px;
   max-width: 1020px;
  }
  /* LOADER */
  
  .bx-wrapper .bx-loading {
   min-height: 50px;
   background: url("img/bx_loader.gif") center center no-repeat #fff;
   height: 100%;
   max-width: 1020px;
   ;
   position: relative;
   top: 0;
   left: 0;
   z-index: 2000;
  }
  /* PAGER */
  
  .bx-wrapper .bx-pager {
   text-align: center;
   font-size: .85em;
   font-family: Arial;
   font-weight: bold;
   color: #666;
   padding-top: 20px;
  }
  .bx-wrapper .bx-pager .bx-pager-item,  .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
   display: inline-block;
   *zoom: 1;
   *display: inline;
  }
  .bx-wrapper .bx-pager.bx-default-pager a {
   background: #666;
   text-indent: -9999px;
   display: block;
   width: 10px;
   height: 10px;
   margin: 0 5px;
   outline: 0;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
  }
  .bx-wrapper .bx-pager.bx-default-pager a:hover,  .bx-wrapper .bx-pager.bx-default-pager a.active {
   background: #000;
  }
  /* DIRECTION CONTROLS (NEXT / PREV) */
  
  .bx-wrapper .bx-prev {
   left: 10px;
   background: url("img/controls.png") no-repeat 0 -32px;
  }
  .bx-wrapper .bx-next {
   right: 10px;
   background: url("img/controls.png") no-repeat -43px -32px;
  }
  .bx-wrapper .bx-prev:hover {
   background-position: 0 0;
  }
  .bx-wrapper .bx-next:hover {
   background-position: -43px 0;
  }
  .bx-wrapper .bx-controls-direction a {
   position: relative;
   top: 50%;
   margin-top: -16px;
   outline: 0;
   width: 32px;
   height: 32px;
   text-indent: -9999px;
   z-index: 9999;
  }
  .bx-wrapper .bx-controls-direction a.disabled {
   display: none;
  }
  /* AUTO CONTROLS (START / STOP) */
  
  .bx-wrapper .bx-controls-auto {
   text-align: center;
  }
  .bx-wrapper .bx-controls-auto .bx-start {
   display: block;
   text-indent: -9999px;
   width: 10px;
   height: 11px;
   outline: 0;
   background: url("img/controls.png") -86px -11px no-repeat;
   margin: 0 3px;
  }
  .bx-wrapper .bx-controls-auto .bx-start:hover,  .bx-wrapper .bx-controls-auto .bx-start.active {
   background-position: -86px 0;
  }
  .bx-wrapper .bx-controls-auto .bx-stop {
   display: block;
   text-indent: -9999px;
   width: 9px;
   height: 11px;
   outline: 0;
   background: url("img/controls.png") -86px -44px no-repeat;
   margin: 0 3px;
  }
  .bx-wrapper .bx-controls-auto .bx-stop:hover,  .bx-wrapper .bx-controls-auto .bx-stop.active {
   background-position: -86px -33px;
  }
  /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
  
  .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
   text-align: left;
   width: 80%;
  }
  .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
   right: 0;
   width: 35px;
  }
  /* IMAGE CAPTIONS */
  
  .bx-wrapper .bx-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   background: #666\9;
   background: rgba(80, 80, 80, 0.75);
   width: 100%;
  }
  .bx-wrapper .bx-caption span {
   color: #fff;
   font-family: Arial;
   display: block;
   font-size: .85em;
   padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;MUSIC STORE&lt;/title&gt;
  &lt;link rel="stylesheet" href="jquery.bxslider.css"/&gt;
  &lt;link rel="stylesheet" href="styles.css"/&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
    &lt;header id="main_header"&gt;
      &lt;div id="callout"&gt;
        &lt;h2&gt;&amp;#9742; 111222333&lt;/h2&gt;
        &lt;p&gt;Michigan State Kawasaki Iceland&lt;/p&gt;
      &lt;/div&gt;
      &lt;h1&gt;MUSIC STORE&lt;/h1&gt;
    &lt;/header&gt;
    &lt;div class="clearfix"&gt;&lt;/div&gt;
    &lt;nav id="nav_menu"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;INSTRUMENTS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;AMPLIFIERS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;ACCESSORIES&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;FEATURED ARTISTS&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    
    &lt;div class="slide-wrap"&gt;
      &lt;div class="slider"&gt;
        &lt;ul class="slider1"&gt;
          &lt;li&gt;&lt;img src="../Music Store/img/smiley1.jpg"/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="../Music Store/img/smiley2.jpg"/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="../Music Store/img/sad.jpg"/&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;section class="one-third"&gt; &lt;/section&gt;
    &lt;section class="one-third"&gt; &lt;/section&gt;
    &lt;section class="one-third"&gt; &lt;/section&gt;
    &lt;div class="clearfix"&gt;&lt;/div&gt;
    &lt;footer&gt;
      &lt;p&gt;&amp;copy;All Rights Reserved&lt;/p&gt;
    &lt;/footer&gt;
  &lt;/div&gt;
  
  &lt;script src="js/jquery.bxslider.min.js"&gt;&lt;/script&gt;&lt;!--For Image   Slider--&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Here is also a screenshot of my folder:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Jf61Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jf61Z.png" alt="Screenshot"></a></p>