title: bxslider javascript slider not working
body: <p>having trouble implementing this bxslider slider. first things first, the images are all visible? how do i make this look like an actual slider?</p>
  
  <p>you can see the issue live here; <a href="http://danielmdesigns.com/windermere/index.html" rel="nofollow">http://danielmdesigns.com/windermere/index.html</a></p>
  
  <p>otherwise, i've done exactly what the website told me to =/</p>
  
  <p>JS Script</p>
  
  <pre><code>&lt;!-- jQuery library (served from Google) --&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- bxSlider Javascript file --&gt;
  &lt;script src="/js/jquery.bxslider.min.js"&gt;&lt;/script&gt;
  &lt;!-- bxSlider CSS file --&gt;
  &lt;link href="/lib/jquery.bxslider.css" rel="stylesheet" /&gt;
  
  &lt;script src="bxslider.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code> &lt;ul class="bxslider"&gt;
    &lt;li&gt;&lt;img src="images/Couple%20on%20Lounge%20Chair_Towneclub.jpg" /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="images/Man%20on%20Bench_Towneclub.jpg" /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="images/Picnic%20Couple_Towneclub.jpg" /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="images/Small%20Golf_Towneclub.jpg" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.bxslider{
  height:600px;
  width:auto;
  background-color:#c41230;
  /*background-image: url(images/imagescroll_1.png);*/
  background-size:cover;
  position:relative;
  top:95px;
  }
  </code></pre>
  
  <p>JS file</p>
  
  <pre><code>$(document).ready(function(){
  $('.bxslider').bxSlider();
  });
  </code></pre>
  
  <p>I am an amateur, but all help is very appreciated. Thanks in advance.</p>