Myself and a colleague have tried adding a Carousel to our site, but have found that it won't operate accordingly. Below is (the relevant amount of) our current code. We also want to have a seperate JS file and to call it, but we're not sure how to do so. Any ideas? 

```
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

<link href="style.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>
<body>

<div id="section2">

    <div id="section2inner">

        <!-- Carousel Begins Here -->

    <script>var spinner = document.querySelector("#spinner");
var angle = 0;
var numpics = $('figure#spinner figure').length;
degInt = 360 / numpics;
var start = 0;
var current = 1;

$(document).ready(function() {

  $('figure#spinner figure').each(function() { 
     $(this).css('-webkit-transform','rotateY(-'+start+'deg) translateZ(-25px)');
     $(this).css('transform', 'rotateY(-'+start+'deg)');
    start = start + degInt;
  });
 });

function setCurrent(current) { 
  $('figure#spinner figure:nth-child('+current+')').addClass('current'); 
// alert(current);
}

function galleryspin(sign) { 

$('figure#spinner figure').removeClass('current focus caption'); 

if (!sign) { angle = angle + degInt; 
           current = (current+1);
            if (current > numpics) { current = 1; }
           } else { 
            angle = angle - degInt; 
            current = current - 1;
            if (current == 0) { current = numpics; } 
           }

spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg) translateZ(-25px); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg)");
  setCurrent(current);
}

$("figure#spinner figure").click(function() {
  if ($(this).hasClass('current')) {
      $(this).toggleClass("focus");
  }
});

setCurrent(1);

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left cursor
        galleryspin('-');
        break;

        case 39: // right cursor
        galleryspin('');
        break;

        case 90: // Z - zoom image in current image
        $('figure#spinner figure.current').toggleClass('focus');
        break;

        case 67: // C - show caption for current image
        $('figure#spinner figure.current').toggleClass('caption');
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault();
});
</script>

<div id="carousel">
<figure id="spinner">
<figure>
  <img src="//placehold.it/363x363" alt="">
    <figcaption>1</figcaption>
</figure>
<figure>
  <img src="//placehold.it/363x363" alt="">
    <figcaption>11</figcaption>
</figure>
<figure>
  <img src="//placehold.it/363x363" alt="">
    <figcaption>21</figcaption>
  </figure>
   <figure>
     <img src="//placehold.it/363x363" alt="">
<figcaption>1211</figcaption>
</figure>
<figure>
  <img src="//placehold.it/363x363" alt="">
<figcaption>111221</figcaption>
</figure>
<figure>
  <img src="//placehold.it/363x363" alt="">
<figcaption>312211</figcaption>
</figure>
  <figure>
    <img src="//placehold.it/363x363" alt="">
<figcaption>12112221</figcaption>
</figure>
</div>
<span style=float:left class=ss-icon onclick="galleryspin('-')">&lt;</span>
<span style=float:right class=ss-icon onclick="galleryspin('')">&gt;</span>

        <!-- Carousel Ends Here -->

</div>
<div id="section2text">
        <h1>H1<h1>
        <p>P</p>
        </div>

    </div>

</div>

</body>

```

Additionally, [this is the Codepen we got the Carousel from.](http://codepen.io/Krazer/pen/hcLyK)