title: How I can use JQuery image slider?
body: <p>I'm having trouble putting together my jQuery image slider. I have no idea what is wrong with it. I'm using <code>responsiveslides.js</code> (<a href="http://responsiveslides.com/" rel="nofollow noreferrer">http://responsiveslides.com/</a>)`</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-css lang-css prettyprint-override"><code>/* RESET */
  
  html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
    /* Cancel out some differences between browser defaults */
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
  }
  
  * {
    /* Padding and borders will be subtracted from the content box width, not added to it. */
    box-sizing: border-box;
  }
  
  article, aside, audio, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
    /* Make sure the browser knows how to display HTML5 elements */
    display: block;
  }
  
  header img{
    display: block;
    width: 30em;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2em;
    padding-bottom: 1em;
  }
  #wrap{
    background-image: url(Images\seamless-old-style-wallpaper-Download-Royalty-free-Vector-File-EPS-37757.jpg);
    background-repeat: repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    border: 1px;
  }
  nav {
      width: 40em;
      height: 3em;
      background: light grey;
      padding-top: 1em;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      margin-right: auto;
      margin-left: auto;
      color: white;
    }
  
  nav ul {
      overflow: hidden;
      margin: 0;
      padding: 0;
  }
  
  nav ul li {
      list-style: none;
      float: left;
      text-align: center;
      color: white;
      width: calc(40em / 6);
  
  }
  
  
  
  nav ul li a, nav ul li a :visited  {
      display: block;
      text-decoration: none;
      color: #white;
  }
  
  nav ul li a: hover {
    color: brown;
  }
  li a { text-decoration: none; color:#fff; }
  li a:visited { text-decoration: none; color:#fff; }
  li a:hover { text-decoration: none; color:#512e15; }
  li a:focus { text-decoration: none; color:#fff; }
  li a:hover, li a:active { text-decoration: none; color:#512e15; }
  
  footer{
    display: flex;
    position: fixed;
    bottom: 0px;
    width: 40em;
    margin-left: auto;
    margin-right: auto;
    height: 3em;
    background-color: light grey;
    padding-top: 1em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    left:0;
    right:0;
    clear: left;
  }
  
  p, address, #phone, #email{
    color: white;
    padding-left: 1em;
    padding-right: 1em;
    font-size: .75em;
  }
  footer img{
    height:1em;
    width: 2em;
    padding-left: 1em;
  
  
  }
  body{
    display: flex;
  }
  
  #leftSide{
    float:left;
    width: 32em;
    height: 16.5em;
    font-size: 1.5em;
    margin-left: 7em;
    margin-right:7em;
    margin-top: 1em;
    margin-bottom: 1.5em;
    overflow-y: scroll;
  }
  aside{
    display: inline-flex;
    color: white;
    font-size: 2em;
    width: 50%;
    height: 100%;
  }
  #title h1{
    color: white;
  margin-top: .25em;
  margin-bottom: .25em
    margin-left: auto;
    margin-right: auto;
    font-size: 5em;
    text-align: center;
  
  }
  iframe{
    margin-top: 3em;
  }
  
  .rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    }
  
  .rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
    }
  
  .rslides li:first-child {
    position: relative;
    display: block;
    float: left;
    }
  
  .rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
    }</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;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;title&gt;Great Art&lt;/title&gt;
  &lt;link rel="stylesheet" href="stylesheet.css"&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="responsiveslides.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body background="Images\flock_wallpaper_pattern_by_hydrogen666.jpg"&gt;
  &lt;div id=wrap&gt;
      &lt;header&gt;
          &lt;img src="Images\Great Art logo 2.jpg" alt="Great Art Logo"&gt; &lt;/img&gt;
      &lt;/header&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Gallery.html"&gt;gallery&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="artist biography.html"&gt;artist biography&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="blog.html"&gt;blog page&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="about us.html"&gt;About us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact us.html"&gt;contact us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div id=main&gt;
          &lt;ul class="rslides"&gt;
              &lt;li&gt;&lt;img src="1.jpg" alt=""&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="2.jpg" alt=""&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="3.jpg" alt=""&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;script&gt;
              $(function () {
                  $(".rslides").responsiveSlides();
              });
          &lt;/script&gt;
      &lt;/div&gt;
      &lt;footer&gt;
          &lt;p&gt; Great Art &lt;/p&gt;
          &lt;address&gt; PO Box 12-345 Christchurch &lt;/address&gt;
          &lt;p id=phone&gt; Phone: 03 345 6789 &lt;/p&gt;
          &lt;p id=email&gt; Email: hubert@great-art.org.nz &lt;/p&gt;
          &lt;img src="Images\fb-art.jpg"&gt; &lt;img src="Images\twitter logo.png"&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have inserted the .js into the containing folder, I can't think of why it won't run.</p>